博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
element-ui表格缩略图悬浮放大
阅读量:5989 次
发布时间:2019-06-20

本文共 524 字,大约阅读时间需要 1 分钟。

element-ui界面非常简洁和美观,提供的组件可以满足绝大多数的应用场景,当表格中显示了图片的缩略图时,想要鼠标浮动在缩略图上时放大图片的效果,该如何实现呢?element-ui虽然没有直接提供图片悬浮放大的组件,但是可以使用Popover弹出框组件,一样实现效果,如下:

element-ui悬浮放大

具体的代码(此处只是图片单元格的代码,其它代码省略):

其中可以看到<el-popover>标签包围的有两个<img/>标签,第一个是悬浮放大的图片定义,第二个是表格中显示的索勒图定义,它有一个关键的属性 slot="reference" 。而<el-popover>的触发方式是 hover,即当鼠标浮动在表格图片上时,自动显示大图片,除了支持 hover 方式外,还支持 click,focus 和 manual;此处title的属性值设为"",即不显示标题。

此处缩略图和大图都是同一张图片,如果有不同的图片,也是可以的,只需要在 :src 中设置不同的值即可

关于Popover的详细使用说明,建议参考

转载地址:http://cpnlx.baihongyu.com/

你可能感兴趣的文章
南昌高新区向智慧城市迈进
查看>>
《系统架构:复杂系统的产品设计与开发》——第3章,第3.4节特殊的逻辑关系...
查看>>
阿里云总裁胡晓明:保护客户数据隐私是阿里云第一原则
查看>>
2017年全球创新公司琅琊榜及10条成功启示录
查看>>
机器人行业,10大流行编程语言对比
查看>>
《21天学通C语言(第7版)》一6.4 小 结
查看>>
《贝叶斯方法:概率编程与贝叶斯推断》一1.7习题
查看>>
关于去掉Li标签前面的小圆点和距离/显示下划线
查看>>
Bag-of-words模型入门介绍文章
查看>>
演讲稿丨梁家恩 物联网智能交互与服务
查看>>
《HTML5与CSS3实战指南》——第1章 HTML5和CSS3简介1.1 什么是HTML5
查看>>
《Unity 5.x游戏开发实战》一2.9 构建
查看>>
《UCD火花集2:有效的互联网产品设计 交互/信息设计 用户研究讨论》一第1章 设计的数据和分析1.1 看不懂数据...
查看>>
《Ansible权威指南》一2.3 Ansible命令用法详解
查看>>
Python基础(一)变量,用户交互,if else , while ,for,三目运算
查看>>
《jQuery UI 开发指南》——2.2 格式化内容
查看>>
《C++语言基础》实践参考——max带来的冲突
查看>>
MySQL · myrocks · myrocks之事务处理
查看>>
【阿里云资讯】云计算再下一城 阿里云携手中国化工集团
查看>>
正则表达式全部符号解释
查看>>