今天碰到了一个问题,table表格中的图片使用el-image,会请求两次
为了实现点击图片放大预览的需求,索性换了一种方法。
使用v-viewer插件
npm install v-viewer --save
然后全局引入,
也可以单独把这个插件抽离出来,导入到main.js中使用就好了。
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'
}
})
然后在组件直接使用
<viewer>
<img
:src="图片数据地址"
style="width: 50px;height: 50px; cursor:pointer">
</viewer>