vue點選圖檔檢視大圖 圖檔檢視大圖 檢視大圖插件 vue-photo-preview

轉載（blog.csdn.net/qq_27721169/article/details/82735013）vue點選圖檔檢視大圖使用插件 vue-photo-preview

轉載（blog.csdn.net/qq_27721169/article/details/82735013）

 版權聲明： https://blog.csdn.net/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()