1 安装插件v-viewer
npm install v-viewer --save
2 引用插件
main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
3 注册调用并按需求配置
main.js
Vue.use(Viewer)
Viewer.setDefaults({
navbar: false, //底部缩略图
toolbar: false, //底部工具栏
button: false, //右上角按钮
title: false, //当前图片标题
movable: true, //是否可以移动
zoomable: true, //是否可以缩放
transition: false //使用 CSS3 过度
})
4 组件中使用
demo.vue
<template>
<div>
<Table
:columns="columns"
:data="data"
stripe
></Table>
</div>
</template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
img: 'https://dev-file.iviewui.com/YSlcnG8cnT6zMRGskMn4F5E0sghiFB9w/large'
},
{
id: 2,
img: 'https://dev-file.iviewui.com/hqegWf0w32KCIveKIafRU3ZmYfXugsI8/large'
}
],
columns: [
{
title: 'ID',
key: 'id'
},
{
title: '图片',
key: 'img',
render: (h, params) => {
return h('viewer', [
h('img', {
attrs: {
src: params.row.img
}
})
])
}
}
]
}
}
}
</script>