关于Vue中图片预览插件（vue-photo-preview）的使用

• 推荐一个Vue中特别好用的图片预览插件（vue-photo-preview），使用方法非常简单，拿来即用,感兴趣的小伙伴可以尝试一下。

第一步、在项目中安装vue-photo-preview包

cmd方式打开自己的项目文件夹，输入如下指令进行安装（第一种第二种都可以，任选其一即可）：

第一种：cnpm i vue-photo-preview --save（推荐使用）
第二种：npm i vue-photo-preview --save

第二步、打开项目的main.js文件进行全局引用

打开main.js,添加如下代码片段

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

第三步、直接在页面中使用即可，具体使用方法如下。

直接在img标签中添加属性即可。

第一种方式：直接使用
<img src="xxx.jpg" preview preview-text="图片描述">
第二种方式：可以根据preview分组，不同组的照片对应的preview值不同，具体如下所示。
<img src="xxx.png" preview="1" preview-text="描述1-1">
<img src="xxx.png" preview="1" preview-text="描述1-2">
<img src="xxx.png" preview="1" preview-text="描述1-3">
<img src="xxx.png" preview="2" preview-text="描述2-1">
<img src="xxx.png" preview="3" preview-text="描述3-1">

效果如下：

以上就是Vue中图片预览插件（vue-photo-preview）的使用方法，觉得有用的小伙伴点个赞，谢谢。