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 动态添加表格行 使用模板、标记
Oct 24 Javascript
js实现飞入星星特效代码
Oct 17 Javascript
jQuery的ready方法实现原理分析
Oct 26 Javascript
js实现简单的计算器功能
Jan 16 Javascript
JS简单判断字符在另一个字符串中出现次数的2种常用方法
Apr 20 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 Javascript
jQuery实现所有验证通过方可提交的表单验证
Nov 21 jQuery
vue.js中created方法作用
Mar 30 Javascript
VueJS 组件参数名命名与组件属性转化问题
Dec 03 Javascript
React Native 混合开发多入口加载方式详解
Sep 23 Javascript
JavaScript代码简化技巧实例解析
Sep 09 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下escape解码函数的实现方法
2010/08/08 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
用JS实现一个页面多个css样式实现
2008/05/29 Javascript
Javascript倒计时代码
2010/08/12 Javascript
在JavaScript中监听IME键盘输入事件
2011/05/29 Javascript
JS控制日期显示的小例子
2013/11/23 Javascript
js动态调用css属性的小规律及实例说明
2013/12/28 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
浅析$(function) ready和onload 的区别
2016/09/03 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
2017/07/28 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
vue.js 实现输入框动态添加功能
2018/06/25 Javascript
详解vue移动端项目的适配(以mint-ui为例)
2018/08/17 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
react native 仿微信聊天室实例代码
2019/09/17 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
[03:01]DOTA2英雄基础教程 露娜
2014/01/07 DOTA
Python实现短网址ShortUrl的Hash运算实例讲解
2015/08/10 Python
python实现彩票系统
2020/06/28 Python
Python中使用pypdf2合并、分割、加密pdf文件的代码详解
2019/05/21 Python
python程序运行进程、使用时间、剩余时间显示功能的实现代码
2019/07/11 Python
pytorch实现建立自己的数据集(以mnist为例)
2020/01/18 Python
简单了解python shutil模块原理及使用方法
2020/04/28 Python
python单元测试框架pytest的使用示例
2020/10/07 Python
实例讲解CSS3中的box-flex弹性盒属性布局
2016/06/09 HTML / CSS
你不知道的5个HTML5新功能
2016/06/28 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
商务会议邀请函
2014/01/09 职场文书
一个大学生十年的职业规划
2014/01/17 职场文书
党建示范点实施方案
2014/03/12 职场文书
学习nginx基础知识
2021/09/04 Servers
中国十大神话动漫电影排行榜 哪吒登顶 白蛇缘起排第七
2022/03/21 国漫