图片预览vue-photo-preview

vue-photo-preview 是什么？

        vue-photo-preview它是基于photoswipe的vue图片预览插件。

vue-photo-preview怎么使用？

1、安装

yarn add vue-photo-preview --save-dev

2、在main.js中引入该组件

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

3、然后在img标签中添加preview和preview-text属性即可

<img  src='https://img0.baidu.com/it/u=3425868493,3104015061&fm=253&fmt=auto&app=120&f=JPEG?w=1199&h=800' width='100px' height='100px' preview="1" preview-text="合同金额" style='cursor: pointer'>

可以根据preview分组，不同组的照片对应的preview值不同

preview-text 表示图片描述

注意：如果图片是异步获取的，那么需要调用 this.$previewRefresh(); 刷新一下。

效果图：