vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）

1、安装 v-viewer 插件

npm install v-viewer --save

2、main.js全局引入

import Vue from 'vue';
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})

3、页面调用

<viewer> // imgList 一定要一个数组，否则报错<img v-for="(img,index) in imgList" :src="img" :key="index">
</viewer>

4、去掉多余的工具样式，可在公共样式，styles下的index.scss文件下加入以下样式即可

.viewer-title{  // 隐藏标题display: none !important;
}
.viewer-list{ // 设置切换高height: 100px !important;
}
.viewer-list > li { // 设置切换图片高width: 72px !important;height: 100px !important;
}
.viewer-toolbar > ul > li{ // 隐藏工具列表display: none !important;
}

希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~

vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）相关推荐

Vue利用Canvas实现逐帧播放图片不闪烁(Vue解决逐帧播放图片闪烁问题)
Vue利用Canvas实现逐帧播放图片不闪烁前言 Vue代码实现实现效果前言 Vue采用<el-image :src="src"></el-image> ...
java freemark导出word （模板、单张图片、多张图片源码）
java freemark导出word (模板.单张图片.多张图片源码) 首先模板设置代码编辑设置word只读.全部环境设置.jar包模板设置 ** 设置模板然后另存为这里一定要选择对xml ...
实现简单的轮播图（单张图片、多张图片）
前言刚学js没多久,这篇博客就当做记录了,以后还会完善的,希望大佬们多多指点.ps:下面出现的都是直接闪动,没有滑动效果的轮播图. 单张图片的替换原理 1.将几张图片叠在一起,通过改变" ...
手机html图片自动滚动,html5手机触屏滑动图片下一张查看特效
特效描述:html5 手机触屏滑动图片下一张查看特效.html5图片下一张查看代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Hungry cat 6 Whatever Hung ...
利用系统相机相册获取单张图片，兼容7.0
场景很多应用都有设置下头像之类的需求,都需要相机相册,但是在6.0的时候加上了运行时权限检测,7.0的时候限制了在应用建共享文件,就是之前相机相册使用的file://URI 不能使用了. 因为在7. ...
vue 实现canvas绘制地图，引用图片，对画布进行原点滚轮缩放，按键缩放，拖动等功能把pagex转化为offsetx
html <div class="bigMap-box"><el-dialog :visible.sync="bigMapDialog" :m ...
手机触屏滑动图片切换插件swiper.js
今天给大家分享一款手机触屏滑动图片切换插件swiper.js是一款swiper手机触屏滑动图片幻灯片,适合各种尺寸.效果图如下: 在线预览源码下载实现的代码. html代码: <div ...
[Android] 触屏setOnTouchListener实现图片缩放、移动、绘制和添加水印
前一篇文章讲述了Android实现图片Matrix矩阵类缩放.旋转.对比度.亮度.饱和度处理,但是真正的图片软件都是使用触屏实现图片缩放.移动.添加水印等功能,所以该篇文章主要通过setOnT ...
android xml图片缩放,Android通过自定义ImageView控件实现图片的缩放和拖动的实现代码...
概述:通过自定义ImageView控件,在xml布局里面调用自定的组件实现图片的缩放. /** * 自定义的ImageView控制,可对图片进行多点触控缩放和拖动 * * @author qiuwan ...

vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）

1、安装 v-viewer 插件

2、main.js全局引入

3、页面调用

vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）相关推荐

最新文章

热门文章

vue利用【​v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）

1、安装 v-viewer 插件

2、main.js全局引入

3、页面调用

vue利用【​v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）相关推荐

最新文章

热门文章

vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）

vue利用【v-viewer插件】实现单张图片以及多张图片的（触屏缩放和拖动）相关推荐