图片预览插件vue-photo-preview的使用示例详解
作者：zuo-yiran
这篇文章主要介绍了图片预览插件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为图片的描述
如图：
图片多的话，可以根据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">
如图片数据请求完，调用this.$previewRefresh()。
到此这篇关于图片预览插件vue-photo-preview的使用的文章就介绍到这了,更多相关vue-photo-preview使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！