图片预览插件vue-photo-preview的使用-Toy模板网

这篇具有很好参考价值的文章主要介绍了图片预览插件vue-photo-preview的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

移动端项目中需要图片预览的功能，但本身使用mintui，vantui中虽然也有，但是为了一个组件安装这个有点儿多余，就选用了vue-photo-preview插件实现（其实偷懒也不想自己写）。
1、安装

npm i vue-photo-preview --save

或者用淘宝镜像

cnpm i vue-photo-preview --save

2、引入
打开项目中main.js，添加如下代码

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

注：引入可进行配置，部分常用配置项：

maxSpreadZoom: 1, // 预览图最大的倍数，默认2倍
fullscreenEl: false, //是否显示右上角全屏按钮
closeEl: true, //是否显示右上角关闭按钮
tapToClose: true, //点击滑动区域应关闭图库
shareEl: false, //是否显示分享按钮
zoomEl: false, //是否显示放大缩小按钮
counterEl: false, //是否显示左上角图片数量按钮
arrowEl: true,  //是否显示左右箭头（pc浏览器模拟手机时）
tapToToggleControls: true, //点击应切换控件的可见性
clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时

具体配置完整引入如下所示：

import preview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
let options = {
  maxSpreadZoom: 1, // 预览图最大的倍数，默认2倍
  fullscreenEl: false, //是否显示右上角全屏按钮
  closeEl: true, //是否显示右上角关闭按钮
  tapToClose: true, //点击滑动区域应关闭图库
  shareEl: false, //是否显示分享按钮
  zoomEl: false, //是否显示放大缩小按钮
  counterEl: false, //是否显示左上角图片数量按钮
  arrowEl: true,  //是否显示左右箭头（pc浏览器模拟手机时）
  tapToToggleControls: true, //点击应切换控件的可见性
  clickToCloseNonZoomable: true //点击图片应关闭图库，仅当图像小于视口的大小时
}
Vue.use(preview, options)
Vue.use(preview)

3、使用
直接使用：

<img v-show="picUrl!=''" class="pic-icon" :src="picUrl" preview preview-text="风景">

注：preview-text为图片的描述

如图：
图片预览插件vue-photo-preview的使用,vue学习笔记,插件,vue.js,插件,前端

图片多的话，可以根据preview分组进行使用。

<img src="地址" preview="1" preview-text="分组1——1">
<img src="地址" preview="1" preview-text="分组1——2">
<img src="地址" preview="2" preview-text="分组2——1">
<img src="地址" preview="3" preview-text="分组3——1">