vue点击图片查看大图使用插件 vue-photo-preview

版权声明： https://blog.csdn.net/qq_27721169/article/details/82735013

1、

npm install vue-photo-preview --save

2、

import preview from 'vue-photo-preview'
  import 'vue-photo-preview/dist/skin.css'
  import Vue from 'vue'
  Vue.use(preview)

3、

# html
//在img标签添加preview属性 preview值相同即表示为同一组
<img src="xxx.jpg" preview="0" preview-text="描述文字">
//分组
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="1" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">
<img src="xxx.jpg" preview="2" preview-text="描述文字">

4、加载数据后刷新

this.$previewRefresh()