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>

效果

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

以上是 Vue使用v-viewer实现图片预览 的全部内容, 来源链接: utcz.com/p/238216.html

回到顶部