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

转载（blog.youkuaiyun.com/qq_27721169/article/details/82735013）vue点击图片查看大图使用插件 vue-photo-preview

转载（blog.youkuaiyun.com/qq_27721169/article/details/82735013）

 版权声明： https://blog.youkuaiyun.com/qq_27721169/article/details/82735013

1、

npm install vue-photo-preview --save

2、

1. import preview from 'vue-photo-preview'

2. import 'vue-photo-preview/dist/skin.css'

3. import Vue from 'vue'

4. Vue.use(preview)

3、

1. # html

2. //在img标签添加preview属性 preview值相同即表示为同一组

3. <img src="xxx.jpg" preview="0" preview-text="描述文字">

4. //分组

5. <img src="xxx.jpg" preview="1" preview-text="描述文字">

6. <img src="xxx.jpg" preview="1" preview-text="描述文字">

7. <img src="xxx.jpg" preview="2" preview-text="描述文字">

8. <img src="xxx.jpg" preview="2" preview-text="描述文字">

4、加载数据后刷新 d

this.$previewRefresh()