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封装的一个js分页
Nov 15 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
Sep 29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
详解VUE 数组更新
Dec 16 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
vue-cli 构建骨架屏的方法示例
Nov 08 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
pageGroup.js实现分页功能
Jul 27 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中实现生成静态文件的方法缓解服务器压力
2014/01/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP可变变量学习小结
2015/11/29 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
tp5递归 无限级分类详解
2019/10/18 PHP
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
Javascript学习笔记之数组的构造函数
2014/11/23 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
JS实现上下左右对称的九九乘法表
2016/02/22 Javascript
Angular.js回顾ng-app和ng-model使用技巧
2016/04/26 Javascript
对javascript继承的理解
2016/10/11 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
Bootstrap输入框组件使用详解
2017/06/09 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
微信小程序 JS动态修改样式的实现方法
2018/12/16 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
在Django框架中编写Context处理器的方法
2015/07/20 Python
python中的编码知识整理汇总
2016/01/26 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Linux系统(CentOS)下python2.7.10安装
2018/09/26 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
super()与this()的区别
2016/01/17 面试题
C++面试题:关于链表和指针
2013/06/05 面试题
妇联领导班子剖析材料
2014/08/21 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
2019优秀干部竞聘演讲稿范文!
2019/07/02 职场文书
安装配置mysql及Navicat prenium的详细流程
2021/06/10 MySQL
排查MySQL生产环境索引没有效果
2022/04/11 MySQL
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
Java Redisson多策略注解限流
2022/09/23 Java/Android