xlogiccc / vue-picture-preview Goto Github PK

别人官方可是有直接可以打开图片预览，不用点击也是可以的

应该算是个bug

现在好像最大缩放的大小比较小， transform时scale只有1.33。。不知道有options里有没有选项？

修改 node_modules/vue-picture-preview/index.js:53 开始

bind: function (el, binding) {
    var previewItem = {
        title: el.alt || '',
        el: el,
        index: 0,
        src: binding.value || ''
    }
    // ......
}

调用的地方

<img
    :src="p.thumImage"
    v-preview="p.originalImage"
    v-for="p in picture"
    :key="p.pictureId">

这样写会报错

<img src="../../assets/school/640.jpg" alt="图片" v-preview="../../assets/school/640.jpg" preview-title-enable="true" preview-nav-enable="true">

这个功能比较常用，但是目前貌似vue这方面的组件没有支持的

滚轮缩放怎么设置的，看文档设置无效，好像有什么出入

ERROR in static/js/vendor.7bb08cc826e7230b8ea5.js from UglifyJs
Unexpected token: punc (() [./~/vue-picture-preview/index.js:7,0][static/js/vendor.7bb08cc826e7230b8ea5.js:27354,16

报错参考：
https://blog.csdn.net/qq_25186543/article/details/80484215

用vue-cli脚手架生成的项目在npm run build的时候会报错，初步排除发现是你的index.js中的es6语法没被转译，手动修改你的index.js文件后发现没有报错了。

本地用的 好好的! 但是打包发线上! 点击预览就出现空白!

本地怎么调试都没问题! 线上就无法预览!

按照你的例子使用神一样的没有任何反应，哥哥你是害人的吗

index.js文件的55行和58行没有绑定el元素属性，导致了一些意象不到的情况，是不是写漏了什么
源文件
var previewItem = {
title: '',
el: el,
index: 0,
src: ''
}
建议改为
var previewItem = {
title: el.alt || '',
el: el,
index: 0,
src: el.src || ''
}

你这个貌似没有默认的样式，是我使用方法有问题吗

使用异步数据报错

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'w' of undefined"

存在keep-alive时，预览图片会包含上一个页面的内容
目前我的解决办法是在全局的路由监听时置空list参数，但是回到上一个页面时，因为置空的原因，预览图片就不能左右滑动了

watch: {
$route(to, from) {
if(this.$refs['imgpreview']){
this.$refs['imgpreview'].preview.list = [];
}
}

在android 4.4不兼容

Failed to resolve directive: preview

My Code:

this.$refs.previewer.show(index);

TypeError: this.$refs.previewer.show is not a function

chorme 下面报错：Uncaught TypeError: Cannot assign to read only property 'exports' of object '#'

看了源码指令，
Vue.directive('preview', {
bind: function (el) {
var previewItem = {
title: '',
el: el,
index: 0,
src: ''
}
在bind的时候赋值src为空，然后在update状态下更新src,会造成数据更新延迟，目前个人把bind的时候赋值的src改成src: el.src，图片就能显示了，请问有更好的解决方法吗

Cannot read property 'w' of undefined

<previewer ref="previewer" :list="previewList" :options="options" @inited="inited"> </previewer>

computed:{
		options: {
			getThumbBoundsFn(index) {
				let thumbnail = document.querySelectorAll('.previewer-'+this.previewType+'-img')[
					index
				];
				let pageYScroll =
					window.pageYOffset || document.documentElement.scrollTop;
				let rect = thumbnail.getBoundingClientRect();
				return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
			}
		}
	},



this.$nextTick(function(){
				this.$refs.previewer.show(index);
			});