vue-photo-preview( 照片预览功能 )

安装

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)

如果不写options 和 Vue.use(preview,options)，那么默认具有全屏预览的功能

Vue.use(preview)

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="描述文字">

重点注意

在获取异步数据的时候可能遇到的问题

解决方法：

如果数据是异步获取回来的，会出现不管你怎么点击，都不会出现效果。这就需要在你成功获取数据回来之后，加上 this.$previewRefresh() ，刷新重置一下。