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

谁借莪１个温暖的怀抱￠ 2024-04-08 11:12 159阅读 0赞

1.安装依赖

  1. npm install v-viewer --save

2.在main.js中引入

  1. import Viewer from 'v-viewer' //图片查看插件
  2. import 'viewerjs/dist/viewer.css'
  3. // 图片预览
  4. Vue.use(Viewer)
  6. Viewer.setDefaults({
  7.  defaultOptions: {
  8.     zIndex: 9999
  9.   },
  10.   Options: {
  11.     "inline": true,
  12.     "button": true,
  13.     "navbar": true,
  14.     "title": true,
  15.     "toolbar": true,
  16.     "tooltip": true,
  17.     "movable": true,
  18.     "zoomable": true,
  19.     "rotatable": true,
  20.     "scalable": true,
  21.     "transition": true,
  22.     "fullscreen": true,
  23.     "keyboard": true,
  24.     "url": "data-source"
  25.   }
  26. })

3.在组件中引用

  1. <van-swipe :autoplay="3000">
  2.         <van-swipe-item v-for="(image, index) in moodsImg" :key="index">
  3.             <viewer :images = "moodsImg" >
  4.                 <img :src="image"/>
  5.             </viewer>
  6.         </van-swipe-item>
  7. </van-swipe>

效果图

2f7e1c79dcde4a89b9160dedfb7721cd.png

发表评论

表情：
评论列表 （有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读