脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue-photo-preview使用

图片预览插件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实现前端列表拖拽功能

    vue实现前端列表拖拽功能

    这篇文章主要为大家详细介绍了如何利用vue实现前端列表拖拽功能,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下
    2023-12-12
  • Vue封装一个简单轻量的上传文件组件的示例

    Vue封装一个简单轻量的上传文件组件的示例

    这篇文章主要介绍了Vue封装一个简单轻量的上传文件组件的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • vue.js vue-router如何实现无效路由(404)的友好提示

    vue.js vue-router如何实现无效路由(404)的友好提示

    众所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用，下面这篇文章主要给大家介绍了关于vue.js中vue-router如何实现无效路由(404)的友好提示的相关资料，需要的朋友可以参考下。
    2017-12-12
  • vue点击右键出现自定义操作菜单实现代码

    vue点击右键出现自定义操作菜单实现代码

    这篇文章主要给大家介绍了关于vue点击右键出现自定义操作菜单实现的相关资料,在网页中我们也希望可以像桌面软件一样,点击右键后出现操作菜单,对选中的数据项进行相应的操作,需要的朋友可以参考下
    2023-08-08
  • vue.js中使用echarts实现数据动态刷新功能

    vue.js中使用echarts实现数据动态刷新功能

    这篇文章主要介绍了vue.js中使用echarts实现数据动态刷新功能,需要的朋友可以参考下
    2019-04-04
  • 浅谈Vue下使用百度地图的简易方法

    浅谈Vue下使用百度地图的简易方法

    本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 在Vant的基础上封装下拉日期控件的代码示例

    在Vant的基础上封装下拉日期控件的代码示例

    这篇文章主要介绍了在Vant的基础上封装下拉日期控件的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • hansontable在vue中的基本使用教程

    hansontable在vue中的基本使用教程

    handsontable是目前在前端界最接近excel的插件，可以执行编辑，复制粘贴，插入删除行列，排序等复杂操作，这篇文章主要介绍了hansontable在vue中的基本使用,需要的朋友可以参考下
    2022-10-10
  • 如何用electron把vue项目打包为桌面应用exe文件

    如何用electron把vue项目打包为桌面应用exe文件

    这篇文章主要介绍了如何用electron把vue项目打包为桌面应用exe文件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-05-05
  • vue3使用vuex实现页面实时更新数据实例教程(setup)

    vue3使用vuex实现页面实时更新数据实例教程(setup)

    在前端开发中往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示,这篇文章主要给大家介绍了关于vue3使用vuex实现页面实时更新数据(setup)的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论