Vue使用v-viewer实现图片预览


Posted in Javascript onOctober 21, 2020

本文实例为大家分享了Vue使用v-viewer实现图片预览的具体代码,供大家参考,具体内容如下

1.安装依赖

npm install v-viewer --save

2.在main.js中引入

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.在组件中引用

<van-swipe :autoplay="3000">
 <van-swipe-item v-for="(image, index) in moodsImg" :key="index">
 <viewer :images = "moodsImg" >
 <img :src="image"/>
 </viewer>
 </van-swipe-item>
</van-swipe>

效果

Vue使用v-viewer实现图片预览

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 动态参数判空操作
Dec 22 Javascript
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
表单JS弹出填写提示效果代码
Apr 16 Javascript
HTML中的setCapture和releaseCapture使用介绍
Mar 21 Javascript
自制的文件上传JS控件可支持IE、chrome、firefox etc
Apr 18 Javascript
深入理解JavaScript系列(48):对象创建模式(下篇)
Mar 04 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
原生JS实现幻灯片
Feb 22 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JavaScript实现的开关灯泡点击切换特效示例
Jul 08 Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 Javascript
在VUE中实现文件下载并判断状态的方法
Nov 08 Javascript
UEditor 自定义图片视频尺寸校验功能的实现代码
Oct 20 #Javascript
Vue+axios封装请求实现前后端分离
Oct 23 #Javascript
构建一个JavaScript插件系统
Oct 20 #Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 #Javascript
原生js实现俄罗斯方块
Oct 20 #Javascript
React实现评论的添加和删除
Oct 20 #Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 #Javascript
You might like
解析zend Framework如何自动加载类
2013/06/28 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
php实现微信公众平台账号自定义菜单类
2015/10/11 PHP
php用户登录之cookie信息安全分析
2016/05/13 PHP
一次因composer错误使用引发的问题与解决
2019/03/06 PHP
thinkphp5+layui实现的分页样式示例
2019/10/08 PHP
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
JavaScript实现简单的tab选项卡切换
2016/01/05 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
JavaScript与JQUERY获取元素的宽、高和位置
2017/02/26 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
vue 实现在函数中触发路由跳转的示例
2018/09/01 Javascript
JavaScript基础教程之如何实现一个简单的promise
2018/09/11 Javascript
vue+canvas实现炫酷时钟效果的倒计时插件(已发布到npm的vue2插件,开箱即用)
2018/11/05 Javascript
详解Vue之事件处理
2020/07/10 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
2020/07/20 Javascript
解决vue页面刷新,数据丢失的问题
2020/11/24 Vue.js
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python 中的int()函数怎么用
2017/10/17 Python
Python中创建二维数组
2018/10/17 Python
基于Python实现船舶的MMSI的获取(推荐)
2019/10/21 Python
PyQt5 文本输入框自动补全QLineEdit的实现示例
2020/05/13 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
事业单位鉴定材料
2014/05/25 职场文书
工会工作先进事迹
2014/08/18 职场文书
工会积极分子个人总结
2015/03/03 职场文书
装修公司管理制度
2015/08/05 职场文书
2016国庆节活动宣传语
2015/11/25 职场文书
用Python实现Newton插值法
2021/04/17 Python
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript