图片预览插件vue-photo-preview的使用示例详解
更新时间：2023年08月16日 10:43:05 作者：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使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue在图片上传的时候压缩图片，帮助大家缓解服务器压力，提高程序性能，感兴趣的朋友可以了解下2020-11-11
el-elementUI使用el-date-picker选择年月
本文主要介绍了el-elementUI使用el-date-picker选择年月,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧2024-02-02
这篇文章主要介绍了jenkins自动构建发布vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
vue template中slot-scope/scope的使用方法
今天小编就为大家分享一篇vue template中slot-scope/scope的使用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue中的config目录下index.js解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue-cli(vue脚手架方式搭建),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要为大家介绍了create vite 实例源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
下面小编就为大家分享一篇Vue2.0 给Tab标签页和页面切换过渡添加样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
本文主要介绍Vue.js中监听器和计算属性的相关知识点，包括对普通属性的监听、对对象的监听、对数组的监听，以及计算属性的Set方法，计算属性与监听器的区别等等2021-05-05
vue-quill-editor+plupload富文本编辑器实例详解
这篇文章主要介绍了vue-quill-editor+plupload富文本编辑器实例详解,需要的朋友可以参考下2018-10-10
最新评论