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

一、安装依赖

npm install v-viewer --save

二、在main.js文件引入

import Vue from 'vue'
//v-viewer轮播图实现效果：
// 轮播图+缩放、旋转照片
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' }
})

三、使用

1、以指令形式引入，将v-viewer指令添加到元素即可

 <span>医生签名：
             <el-image  style="width: 50px; height: 50px"
                        v-for="url in doctorSignaturePhoto" 
                        :key="url" :src="url" 
                         v-viewer lazy>
                        </el-image>
  </span>

2、以组件形式引入

<viewer :images="images">
   <img v-for="src in doctorSignaturePhoto" :src="src" :key="src"/>
   </template>
 </viewer>

四、这里引用两张https://element.eleme.cn/#/zh-CN/component/image里的两张图片并使用了相关知识。

 export default {
        
        data() {
            return {
                   doctorSignaturePhoto: [
                 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                      ]
                   }
               }
              }