vue中element-ui表格缩略图悬浮放大功能的实例代码


Posted in Javascript onJune 26, 2018

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

vue中element-ui表格缩略图悬浮放大功能的实例代码

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

<el-table-column
  prop="picture"
  header-align="center"
  align="center"
  width="150px"
  label="图片">
  <template slot-scope="scope">
   <el-popover
    placement="right"
    title=""
    trigger="hover">
    <img :src="scope.row.picture"/>
    <img slot="reference" :src="scope.row.picture" :alt="scope.row.picture" style="max-height: 50px;max-width: 130px">
   </el-popover>
  </template>
</el-table-column>

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

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

关于Popover的详细使用说明,建议参考官方文档Popover弹出框

总结

以上所述是小编给大家介绍的vue中element-ui表格缩略图悬浮放大功能的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery中获取checkbox选中项等操作及注意事项
Nov 24 Javascript
Node.js模拟浏览器文件上传示例
Mar 26 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
自动适应iframe右边的高度
Dec 22 Javascript
简单实现bootstrap导航效果
Feb 07 Javascript
AngularJS的脏检查深入分析
Apr 22 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
Jun 17 Javascript
JS实现手写parseInt的方法示例
Sep 24 Javascript
trackingjs+websocket+百度人脸识别API实现人脸签到
Nov 26 Javascript
Node 搭建一个静态资源服务器的实现
May 20 Javascript
vue动态绑定class的几种常用方式小结
May 21 Javascript
如何在postman测试用例中实现断言过程解析
Jul 09 Javascript
Vue动态控制input的disabled属性的方法
Jun 26 #Javascript
利用Decorator如何控制Koa路由详解
Jun 26 #Javascript
vue实现点击关注后及时更新列表功能
Jun 26 #Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 #Javascript
nuxt.js 缓存实践
Jun 25 #Javascript
vue2.0使用v-for循环制作多级嵌套菜单栏
Jun 25 #Javascript
浅谈super-vuex使用体验
Jun 25 #Javascript
You might like
php&amp;java(一)
2006/10/09 PHP
phpMyAdmin出现无法载入 mcrypt 扩展,请检查PHP配置的解决方法
2012/03/26 PHP
php支付宝接口用法分析
2015/01/04 PHP
贴一个在Mozilla中常用的Javascript代码
2007/01/09 Javascript
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
提升你网站水平的jQuery插件集合推荐
2011/04/19 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
JS实现Enter键跳转及控件获得焦点
2013/08/12 Javascript
jsonp原理及使用
2013/10/28 Javascript
JavaScript中的Promise使用详解
2015/06/24 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
深入理解jquery中的each用法
2016/12/14 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
Vue2.0 v-for filter列表过滤功能的实现
2018/09/07 Javascript
[42:52]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python del()函数用法
2013/03/24 Python
Python的迭代器和生成器使用实例
2015/01/14 Python
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
浅谈keras中的batch_dot,dot方法和TensorFlow的matmul
2020/06/18 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
基于Jquery和Css3代码制作可以缩放的搜索框
2015/11/19 HTML / CSS
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
什么时候需要进行强制类型转换
2016/09/03 面试题
劳动之星获奖感言
2014/02/01 职场文书
重阳节登山活动方案
2014/02/03 职场文书
西安导游词
2015/02/12 职场文书
市直属机关2016年主题党日活动总结
2016/04/05 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers