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

比眉伴天荒 2021-07-24 19:56 931阅读 0赞

vue图片点击放大预览v-viewer

1、安装依赖
npm install v-viewer —save

2.在main.js中引入

  1. import Vue from 'vue'; import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ 
  2.   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. })

3.使用插件

  1. <viewer :images="photo"> 
  2.       //photo 一定要一个数组，否则报错
  3.           <img
  4.                 v-for="(src,index) in photo"
  5.                 :src="src"
  6.                 :key="index"
  7.               >
  8. </viewer>

发表评论

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

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

相关阅读