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版Tab标签切换
Mar 16 Javascript
Js+Flash实现访问剪切板操作
Nov 20 Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
js中substring和substr的定义和用法
May 05 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
Aug 13 Javascript
JS常见构造模式实例对比分析
Aug 27 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 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使用SOAP调用.net的WebService数据
2013/11/12 PHP
大家须知简单的php性能优化注意点
2016/01/04 PHP
Yii2框架dropDownList下拉菜单用法实例分析
2016/07/18 PHP
Aptana调试javascript图解教程
2009/11/30 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
如何动态加载外部Javascript文件
2015/12/02 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
2017/08/17 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
Vue.JS实现垂直方向展开、收缩不定高度模块的JS组件
2018/06/19 Javascript
vue-cli项目修改文件热重载失效的解决方法
2018/09/19 Javascript
js中offset,client , scroll 三大元素知识点总结
2019/09/11 Javascript
python 简单的多线程链接实现代码
2016/08/28 Python
Python安装官方whl包和tar.gz包的方法(推荐)
2017/06/04 Python
浅谈python已知元素,获取元素索引(numpy,pandas)
2019/11/26 Python
基于Tensorflow:CPU性能分析
2020/02/10 Python
python程序输出无内容的解决方式
2020/04/09 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
Python爬取酷狗MP3音频的步骤
2021/02/26 Python
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
2019年c语言经典面试题目
2016/08/17 面试题
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
小学生家长评语集锦
2014/01/30 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
教师应聘自荐信范文
2014/03/14 职场文书
财产公证书样本
2014/04/04 职场文书
品德评语大全
2014/05/05 职场文书
爱国主义演讲稿
2014/05/07 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
2015出纳试用期工作总结
2014/12/12 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python
python使用pywinauto驱动微信客户端实现公众号爬虫
2021/05/19 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫
PYTHON基于Pyecharts绘制常见的直角坐标系图表
2022/04/28 Python