vue-photo-preview GitHub官網(wǎng)
1. 使用
# 安裝
npm install vue-photo-preview --save
# 引入
import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
fullscreenEl: false
};
Vue.use(preview, options)
Vue.use(preview)
# html
//在img標(biāo)簽添加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="描述文字">
效果圖
image.png
2. 問題
如果數(shù)據(jù)是異步獲取回來的乌奇，會出現(xiàn)不管你怎么點擊泥张，都不會出現(xiàn)效果。這就需要在你成功獲取數(shù)據(jù)回來之后，加上 this.$previewRefresh() 儡嘶，刷新重置一下。
<img
class="pic"
v-for="(item,index) of imgList"
:key="index"
:src="item.smallFileName"
:large="item.fileName"
preview="0"
preview-text="癥狀圖片"
>
image.png
