Vue使用v-viewer实现图片预览
更新时间:2020年10月21日 12:01:33 作者:Wang_kaiya
这篇文章主要为大家详细介绍了Vue使用v-viewer实现图片预览,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
基于element-ui中el-select下拉框选项过多的优化方案
这篇文章主要介绍了基于element-ui中el-select下拉框选项过多的优化方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-04-04vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载
这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10vue打包后dist目录下的index.html网页显示空白的问题(两种方案)
本文主要介绍了vue打包后dist目录下的index.html网页显示空白的问题,主要介绍了两种方式,具有一定的参考价值,感兴趣的可以了解一下2023-11-11Vue使用js-audio-recorder实现录制,播放与下载音频功能
这篇文章主要为大家详细介绍了Vue如何使用js-audio-recorder实现录制,播放与下载音频功能,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下2023-12-12解决vue net :ERR_CONNECTION_REFUSED报错问题
这篇文章主要介绍了解决vue net :ERR_CONNECTION_REFUSED报错问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论