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 相关文章推荐
一个不错的用JavaScript实现的UBB编码函数
Mar 09 Javascript
javascript 写类方式之一
Jul 05 Javascript
javascript 写类方式之五
Jul 05 Javascript
js获取单元格自定义属性值的代码(IE/Firefox)
Apr 05 Javascript
JS字符串截取函数实例
Dec 27 Javascript
javascript框架设计读书笔记之种子模块
Dec 02 Javascript
JS实现数字格式千分位相互转换方法
Aug 01 Javascript
vue插件tab选项卡使用小结
Oct 27 Javascript
Vue.js自定义事件的表单输入组件方法
Mar 08 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
js滚轮事件 js自定义滚动条的实现
Jan 18 Javascript
Vue使用路由钩子拦截器beforeEach和afterEach监听路由
Nov 16 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调用Java对象的方法
2006/10/09 PHP
php常用hash加密函数
2014/11/22 PHP
关于Yii中模型场景的一些简单介绍
2019/09/22 PHP
Prototype使用指南之selector.js说明
2008/10/26 Javascript
jquery 事件对象属性小结
2010/04/27 Javascript
jquery控制页面部分刷新的方法
2015/06/24 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
基于Javascript实现的不重复ID的生成器
2016/12/25 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
2016/12/29 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
AngularJS动态添加数据并删除的实例
2018/02/27 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
python监控键盘输入实例代码
2018/02/09 Python
简单了解python字符串前面加r,u的含义
2019/12/26 Python
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
请介绍一下Ant
2016/07/22 面试题
写演讲稿要注意的六件事
2014/01/14 职场文书
文明寄语大全
2014/04/11 职场文书
水电维修专业推荐信
2014/09/06 职场文书
领导班子个人对照检查剖析材料
2014/09/29 职场文书
2014全年工作总结
2014/11/27 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
敬老院活动感想
2015/08/07 职场文书
《梅花魂》教学反思
2016/02/18 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
HTML+CSS+JS实现图片的瀑布流布局的示例代码
2021/04/22 HTML / CSS
MySQL获取所有分类的前N条记录
2021/05/07 MySQL
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Python进行区间取值案例讲解
2021/08/02 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript