本文摘自PHP中文网，作者coldplay.xixi，侵删。
首先先安装依赖：
npm install v-viewer --save
然后全局引入，我这边是在main.js里面操作写的：
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
相关学习推荐：javascript教程
然后注册下：
1 2 3 4 | 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' }
})
|
使用的一个demo就是：
1 2 3 4 5 6 7 | <viewer :images="tupians">
<i-col span="4" v-for="item in tupians">
<p class="detailed">
<img :src="item.img" alt="">
</p>
</i-col>
</viewer>
|
其中item.img其实就是一个路径。
在回到iview表格中，
需要以
1 2 3 4 5 6 7 8 | h('xxxx', {
props: {
trigger: 'hover',
placement: 'top',
content: '二维码'
}
}, [
])
|
这种格式渲染出来，第一个参数是标签，第二参数是标签里面可以含props(vue的v-bind)，也可以包含属性。第三个参数是数组，表示子标签。子标签也是这种格式的，以此递归下去。
所以改写成这种格式的，在本人项目中的一个demo如下，就可以实现在表格中点击图片进行放大展示：
阅读剩余部分
相关阅读 >>
深入了解jquery和vue的区别（附代码）
vue配什么ui框架比较好
html中 table鼠标拖拽排序功能的实现
vue.js能做轮播图吗
在vue style中使用data中的变量的方法详解
vue treeselect树形下拉框之获取选中节点的ids和lables操作
在vue中怎么使用layui
vue 3.2发布啦，站起来继续学！
vue中vue.set有几个参数
vue 轻量级图表组件
更多相关阅读请进入《vue》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » Vue基于iview table展示图片实现点击放大功能
