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 相关文章推荐
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
使用AngularJS中的SCE来防止XSS攻击的方法
Jun 18 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
AngularJS实现根据变量改变动态加载模板的方法
Nov 04 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
jquery版轮播图效果和extend扩展
Jul 18 jQuery
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 Javascript
微信小程序实现倒计时调用相机自动拍照功能
Jun 10 Javascript
微信小程序picker组件关于objectArray数据类型的绑定方法
Mar 13 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
微信小程序组件传值图示过程详解
Jul 31 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
Jun 02 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
用PHP产生动态的影像图
2006/10/09 PHP
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
PHP命令Command模式用法实例分析
2018/08/08 PHP
JavaScript起点(严格模式深度了解)
2013/01/28 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
2013/07/09 Javascript
jquery选择器使用详解
2014/04/08 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
JS 打印功能代码可实现打印预览、打印设置等
2014/10/31 Javascript
js函数与php函数的区别实例浅析
2015/01/12 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
简单实现jQuery进度条轮播实例代码
2016/06/20 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
基于hover的用法实例(推荐)
2017/07/04 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
jquery实现倒计时小应用
2017/09/19 jQuery
vue keep-alive的简单总结
2021/01/25 Vue.js
js实现简单图片拖拽效果
2021/02/22 Javascript
[49:27]LGD vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python的批量远程管理和部署工具Fabric用法实例
2015/01/23 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
浅谈python为什么不需要三目运算符和switch
2016/06/17 Python
python实现斐波那契数列的方法示例
2017/01/12 Python
django 按时间范围查询数据库实例代码
2018/02/11 Python
python 中文件输入输出及os模块对文件系统的操作方法
2018/08/27 Python
python实现简单加密解密机制
2019/03/19 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
美国球鞋寄卖网站:Stadium Goods
2018/05/09 全球购物
说明书怎么写
2014/05/06 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
2014幼儿园大班工作总结
2014/11/10 职场文书
普希金的诗歌赏析(3首)
2019/08/20 职场文书
JavaScript 对象创建的3种方法
2021/11/17 Javascript