Vue基于iview table展示图片实现点击放大


Posted in Javascript onAugust 05, 2020

首先先安装依赖:

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' }
})

使用的一个demo就是:

<viewer :images="tupians">
   <i-col span="4" v-for="item in tupians">
     <div class="detailed">
      <img :src="item.img" alt="">
     </div>
   </i-col>
</viewer>

其中item.img其实就是一个路径。

在回到iview表格中,

需要以

h('xxxx', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二维码'
        }
      }, [
      ])

这种格式渲染出来,第一个参数是标签,第二参数是标签里面可以含props(vue的v-bind),也可以包含属性。第三个参数是数组,表示子标签。子标签也是这种格式的,以此递归下去。

所以改写成这种格式的,在本人项目中的一个demo如下,就可以实现在表格中点击图片进行放大展示:

{
  title: '二维码',
  align: 'center',
  render: (h, params) => {
    console.log('h, param', params);
    let devicesArr = [];
    let photo = [];
    photo.push('/erweima/'+params.row.pt_number+'.png');
    devicesArr.push(
      h('Tooltip', {
        props: {
          trigger: 'hover',
          placement: 'top',
          content: '二维码'
        }
      }, [
        h('viewer', {
          props:{
            images:photo
          }
        }, [
          h('img', {
            attrs: {
              src:photo[0],
              style: 'width: 22px;margin-right:5px'
            },
          })
        ])
      ])
    );
    return h('div', devicesArr);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
详解JavaScript数组和字符串中去除重复值的方法
Mar 07 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
May 28 Javascript
关于angular js_$watch监控属性和对象详解
Apr 24 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
Vue 开发必须知道的36个技巧(小结)
Oct 09 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 #Javascript
解决vue路由name同名,路由重复的问题
Aug 05 #Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 05 #Javascript
Vue 同步异步存值取值实现案例
Aug 05 #Javascript
详解vue路由
Aug 05 #Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 #Javascript
vant 自定义 van-dropdown-item的用法
Aug 05 #Javascript
You might like
php使用Jpgraph创建3D饼形图效果示例
2017/02/15 PHP
Webkit的跨域安全问题说明
2011/09/13 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
a标签的href和onclick 的事件的区别介绍
2013/07/26 Javascript
js动态给table添加/删除tr的方法
2013/08/02 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
jQuery返回定位插件详解
2017/05/15 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
JavaScript类数组对象转换为数组对象的方法实例分析
2018/07/24 Javascript
layui添加动态菜单与选项卡 AJAX请求的例子
2019/09/25 Javascript
使用Vue生成动态表单
2019/11/26 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
[43:14]Liquid vs Optic 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python实现弹跳小球
2019/05/13 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
Python如何使用vars返回对象的属性列表
2020/10/17 Python
如何使用Django Admin管理后台导入CSV
2020/11/06 Python
Python实例教程之检索输出月份日历表
2020/12/16 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
如何转换一个字符串到enum值
2014/04/12 面试题
员工晚婚的请假条
2014/02/08 职场文书
中学生运动会入场词
2014/02/12 职场文书
工程合作意向书范本
2015/05/09 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
MongoDB数据库的安装步骤
2021/06/18 MongoDB
详解Go语言中Get/Post请求测试
2022/06/01 Golang