首先全局引入

import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({Options: {'inline': true,'button': true,'navbar': false,'title': false,'toolbar': false,'tooltip': true,'movable': true,'zoomable': true,'rotatable': true,'scalable': true,'transition': true,'fullscreen': true,'keyboard': true,'url': 'data-source'}
})

页面上使用

<div v-show="imgUrl" class="img-box" ref="img-box"><viewer><img :src="imgUrl" /></viewer></div>mounted() {//模拟异步加载new Promise((resolve, reject) => {resolve()}).then(data => {this.imgUrl = data})},

解决方法

// 在div标签   v-viewer="{ movable: false }"
<div v-show="imgUrl" class="img-box" ref="img-box"  v-viewer="{ movable: false }"><viewer><img :src="imgUrl" /></viewer></div>

参考：

v-viewer异步加载导致无效