xlogiccc / vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

vue-picture-preview

移动端、PC 端 Vue.js 图片预览插件 | Friendly picture file preview Vue.js plugin based on PhotoSwipe.

安装

npm install --save vue-picture-preview

使用

入口文件中全局引入

import Vue from 'vue'
import vuePicturePreview from 'vue-picture-preview';

Vue.component('Previewer', vuePicturePreview);

按需局部引入

import vuePicturePreview from 'vue-picture-preview';

export default {
  components: {
    Previewer: vuePicturePreview
  }
}

示例

<div>
    <img
        class="previewer-demo-img"
        v-for="(item, index) in list"
        :src="item.src"
        width="100"
        @click="show(index)"
        :key="index"
      />
      <previewer ref="previewer" :list="list" :options="options"> </previewer>
</div>

export default {
  data() {
    return {
      list: [
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rjyub5bj30go0b40wc.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rmt8pq4j30go0b4n28.jpg',
          w: 600,
          h: 400
        },
        {
          msrc:
            'https://tva1.sinaimg.cn/thumbnail/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          src:
            'https://tva1.sinaimg.cn/large/006y8mN6ly1g95rn3grt6j30go0b4n0w.jpg',
          w: 600,
          h: 400
        }
      ],
      options: {
        getThumbBoundsFn(index) {
          // find thumbnail element
          let thumbnail = document.querySelectorAll('.previewer-demo-img')[
            index
          ];
          // get window scroll Y
          let pageYScroll =
            window.pageYOffset || document.documentElement.scrollTop;
          // optionally get horizontal scroll
          // get position of element relative to viewport
          let rect = thumbnail.getBoundingClientRect();
          // w = width
          return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
          // Good guide on how to get element coordinates:
          // http://javascript.info/tutorial/coordinates
        }
      }
    };
  },
  methods: {
    show(index) {
      // 显示特定index的图片，使用ref
      this.$refs.previewer.show(index);
    }
  }
};

属性

名字	类型	默认值	说明	版本要求
list	array		图片列表	2.0.1
options	object		PhotoSwipe的配置	2.0.1

事件

名字	参数	说明	版本要求
@on-close	-	关闭时触发	2.0.1
@on-index-change	-	切换图片后触发(首次打开不会触发)	2.0.1

插槽

名字	说明	版本要求
button-after	操作按钮之后，可以添加自定义图标	2.0.1
button-before	操作按钮之前，可以添加自定义图标	2.0.1

方法

名字	参数	说明	版本要求
goTo	index	跳转到特定图片	2.0.1
prev	-	跳转到上一张	2.0.1
next	-	跳转到下一张	2.0.1
getCurrentIndex	-	获取当前图片索引	2.0.1

重要提示

• 注意避免使用过大图片: 否则可能会出现卡顿黑屏的情况(尤其是在 Android 机子上)
• 建议为所有图片定义尺寸: PhotoSwipe 本身要求设置宽高，本组件会尝试对没有设置宽高的图片先加载再显示，可能会造成性能问题或者宽带浪费。

vue-picture-preview's Issues

在IE中报错，解决不兼容问题的解决方法

// import 的时候 用babel-loader处理下。
import vuePicturePreview from 'babel-loader!vue-picture-preview';

无法绑定src与alt属性，导致了一些意象不到的情况

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 || ''
}

ie

Failed to resolve directive: preview

Failed to resolve directive: preview

iOS9.3.2存在bug

如果图片是静态的话，v-preview怎么使用

这样写会报错

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

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

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

被你坑惨了

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

不支持异步数据

使用异步数据报错

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

你这个貌似没有默认的样式

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

在web端点击图片会一直显示loading

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

在android 4.4不兼容

在android 4.4不兼容

请问支持控制最大缩放的图片大小吗？

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

webpack打包有问题

滚轮缩放怎么设置的

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

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

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

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

webpack打包时报了错，怎么解决

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

是否支持缩放？

可以进行左右滑动预览图片嘛

在IE 11 中会报错 未定义错误

【vue2 webpack打包后，还是有es6的语法，导致报错】

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

移动端放大图片的时候，点击返回键，图片没消失。。

应该算是个bug

动态改变图片预览数组时初次点击会报错

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);
			});

npm run dev，页面加载报错导致空白页

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

一直在加载

修改 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">

[Vue warn]: Failed to mount component: template or render function not defined.

My Code:

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

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

存在keep-alive时，预览图片会包含上一个页面的内容

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

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

是否能支持一下在放大的时候删除图片的功能呢

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

编译时报错

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