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 相关文章推荐
Js callBack 返回前一页的js方法
Nov 30 Javascript
jQuery Tips 为AJAX回调函数传递额外参数的方法
Dec 28 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
js使用eval解析json实例与注意事项分享
Jan 18 Javascript
js实现checkbox全选和反选示例
May 01 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
Markdown+Bootstrap图片自适应属性详解
May 21 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
vue.js的提示组件
Mar 02 Javascript
Vue filter 过滤当前时间 实现实时更新效果
Dec 20 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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
php微信开发自定义菜单
2016/08/27 PHP
PHP针对伪静态的注入总结【附asp与Python相关代码】
2017/08/01 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
javascript里模拟sleep(两种实现方式)
2013/01/25 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
javascript 应用小技巧方法汇总
2015/07/05 Javascript
jQuery链式操作实例分析
2015/11/16 Javascript
Bootstrap响应式表格详解
2017/05/23 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue2.0 computed 计算list循环后累加值的实例
2018/03/07 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
el-input 标签中密码的显示和隐藏功能的实例代码
2019/07/19 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
[43:26]完美世界DOTA2联赛PWL S2 Forest vs Rebirth 第二场 11.20
2020/11/23 DOTA
Python中的yield浅析
2014/06/16 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
Python如何实现爬取B站视频
2020/05/20 Python
罗德与泰勒百货官网:Lord & Taylor
2016/08/12 全球购物
德国团购网站:Groupon德国
2018/03/13 全球购物
MIS软件工程师的面试题
2016/04/22 面试题
个人授权委托书
2014/09/15 职场文书
迎新年主持词
2015/07/06 职场文书
活动宣传稿范文
2015/07/23 职场文书
2015年女工委工作总结
2015/07/27 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
react国际化react-intl的使用
2021/05/06 Javascript