多语言展示
当前在线:1667今日阅读:176今日分享:34

vue点击图片放大预览,可缩放、移动切换下一张

应项目需求需要点击图片实现:放大预览、可缩放、移动、切换下一张等功能,第一时间找了相关的组件,经过对比选用了一款使用比较简单、功能强大的组件 v-viewer下面来介绍一下它的使用方法:(建议使用淘宝镜像 cnpm,速度更快,这里楼主用的是cnpm 未安装的同学也可直接用 npm命令)
工具/原料

编辑器推荐:Visual Studio Code

方法/步骤
1

安装:cnpm install v-viewer --save  回车执行

2

安装完成,index.vue或main.js 中引入配置文件:import Vue from 'vue';import Viewer from 'v-viewer'import 'viewerjs/dist/viewer.css'

3

index.vue页面代码除引入组件代码:               

4

images为图片地址存放数组,再data中定义:data() {        let that = this        return {            images:[                require('@assets/images/aboutUs/zoom_1.jpg'),                require('@assets/images/aboutUs/zoom_2.jpg'),                require('@assets/images/aboutUs/zoom_3.jpg')            ],        }},

5

组件调用:Vue.use(Viewer, {defaultOptions: {zIndex:1,inline:false,button:true,navbar:false,title:false,toolbar:false,tooltip:true,movable:true,zoomable:true,rotatable:false,scalable:false,transition:true,fullscreen:true,keyboard:false,loop:false,}})

6

defaultOptions内为组件配置参数zIndex:1 层级,inline 启用 inline 模式,button 显示右上角关闭按钮,navbar 显示缩略图导航,title 显示当前图片标题,toolbar 工具栏,tooltip 显示缩放百分比,movable 图片是否可以移动,zoomable 图片是否可以缩放,rotatable 图片是否可旋转,scalable 图片是否可翻转,transition css3过度,fullscreen 播放时是否全屏,keyboard 是否支持键盘,loop 图片是否循环播放,以上为楼主配置的参数,还有很多其他参数设置,可去v-viewer文档上查找,根据自己需要添加

7

执行效果

推荐信息