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 DOM 学习第五章 表单简介
Feb 19 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
javascript获取URL参数与参数值的示例代码
Dec 20 Javascript
javascript工厂方式定义对象
Dec 26 Javascript
javascript中的altKey 和 Event属性大全
Nov 06 Javascript
前端弹出对话框 js实现ajax交互
Sep 09 Javascript
JavaScript阻止表单提交方法(附代码)
Aug 15 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
Mar 22 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
兼容性最强的PHP生成缩略图的函数代码(修改版)
2011/01/18 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
php实现微信企业转账功能
2018/10/02 PHP
jQuery参数列表集合
2011/04/06 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
详解node.js搭建代理服务器请求数据
2017/04/08 Javascript
Vue+axios 实现http拦截及路由拦截实例
2017/04/25 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
解决vue页面DOM操作不生效的问题
2018/03/17 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
React精髓!一篇全概括小结(急速)
2019/05/23 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
python批量下载图片的三种方法
2013/04/22 Python
Python列表计数及插入实例
2014/12/17 Python
python字典操作实例详解
2017/11/16 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
用于业余项目的8个优秀Python库
2018/09/21 Python
ORM Django 终端打印 SQL 语句实现解析
2019/08/09 Python
Python高级特性——详解多维数组切片(Slice)
2019/11/26 Python
python带参数打包exe及调用方式
2019/12/21 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
新西兰最大的在线设计师眼镜店:SmartBuyGlasses新西兰
2017/10/20 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
EMPHASIS艾斐诗官网:周生生旗下原创精品珠宝品牌
2020/12/17 全球购物
毕业论文评语大全
2014/04/29 职场文书
竞聘演讲稿怎么写
2014/08/28 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
开展党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
大国崛起观后感
2015/06/02 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js
零基础学java之方法的定义与调用详解
2022/04/10 Java/Android