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 入门级学习笔记及源码
Jan 22 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
jquery原创弹出层折叠效果点击折叠弹出一个层
Mar 12 Javascript
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
javascript实现QQ空间相册展示源码
Dec 12 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
vue控制多行文字展开收起的实现示例
Oct 11 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面向对象的进阶学习(抽像类、接口、final、类常量)
2012/05/07 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
PHP贪婪算法解决0-1背包问题实例分析
2015/03/23 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
php文件上传、下载和删除示例
2020/08/28 PHP
Laravel学习基础之migrate的使用教程
2017/10/11 PHP
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
JavaScript中去掉数组中的重复值的实现方法
2011/08/03 Javascript
基于dom编程中 动态创建与删除元素的使用
2013/04/17 Javascript
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
jQuery中add()方法用法实例
2015/01/08 Javascript
jquery实现转盘抽奖功能
2017/01/06 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
node中的session的具体使用
2018/09/14 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
Tensorflow卷积神经网络实例
2018/05/24 Python
在python中,使用scatter绘制散点图的实例
2019/07/03 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
纯CSS绘制漂亮的圆形图案效果
2014/05/07 HTML / CSS
自学考试自我鉴定范文
2013/09/26 职场文书
护理毕业生自荐信范文
2013/12/22 职场文书
技校个人求职信范文
2014/01/25 职场文书
教师求职信范文
2014/05/24 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
golang goroutine顺序输出方式
2021/04/29 Golang