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对html元素取值与赋值的方法
Nov 20 Javascript
fmt:formatDate的输出格式详解
Jan 09 Javascript
js数值计算时使用parseInt进行数据类型转换(jquery)
Oct 07 Javascript
jQuery带箭头提示框tooltips插件集锦
Nov 17 Javascript
node.js中的buffer.fill方法使用说明
Dec 14 Javascript
jQuery内部原理和实现方式浅析
Feb 03 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
手机端转换rem适应
Apr 01 Javascript
vue省市区三联动下拉选择组件的实现
Apr 28 Javascript
值得分享和收藏的xmlplus组件学习教程
May 05 Javascript
微信小程序图片右边加两行文字的代码
Apr 23 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
Nov 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接口中interface存在的意义
2013/06/27 PHP
在PHP中运行Linux命令并启动SSH服务的例子
2014/06/12 PHP
PHP安装扩展mcrypt以及相关依赖项深入讲解
2021/03/04 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
javascript中的几个运算符
2007/06/29 Javascript
5款Javascript颜色选择器
2009/10/25 Javascript
JQuery将文本转化成JSON对象需要注意的问题
2011/05/09 Javascript
jQuery代码优化之基本事件
2011/11/01 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
js时间查询插件使用详解
2017/04/07 Javascript
Angular6新特性之Angular Material
2018/12/28 Javascript
vue-cli 项目打包完成后运行文件路径报错问题
2019/07/19 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
2019/12/17 Javascript
Python中的类与对象之描述符详解
2015/03/27 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
详细解析Python当中的数据类型和变量
2015/04/25 Python
win7上python2.7连接mysql数据库的方法
2017/01/14 Python
python反编译学习之字节码详解
2019/05/19 Python
pyQt5实时刷新界面的示例
2019/06/25 Python
pytorch 归一化与反归一化实例
2019/12/31 Python
python 监控logcat关键字功能
2020/09/04 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
采购部主管岗位职责
2014/01/01 职场文书
创建精神文明单位实施方案
2014/03/08 职场文书
幼儿园老师寄语
2014/04/03 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
2014年信息技术工作总结
2014/12/16 职场文书
安全检查汇报材料
2014/12/26 职场文书
追悼会答谢词范文
2015/09/29 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python