1、安装依赖

npm install v-viewer --save

2、局部文件引入

import Vue from 'vue';
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、使用

<ul id="pictures">
    <viewer :images="imageList">
       <li v-for="imagelink in imageList" >
           <el-link v-if="willShow" @click="removeImage(imagelink)" style="color: red;position: relative;top: 17px;left: 169px;z-index: 100;cursor: pointer;" icon="el-icon-close"></el-link>
           <div :class="{'image-box':willShow}" >
               <img  :src="imagelink.fjlj" :key="imagelink.fjlj">
           </div>
        </li>
     </viewer>
 </ul>

4、效果

原创

https://github.com/mirari/v-viewer