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 相关文章推荐
JavaScipt基本教程之JavaScript语言的基础
Jan 16 Javascript
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
基于jquery的无缝循环新闻列表插件
Mar 07 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
javascript解析json数据的3种方式
May 08 Javascript
在AngularJS中使用AJAX的方法
Jun 17 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript tab选项卡插件实例代码
Feb 23 Javascript
微信小程序Getuserinfo解决方案图解
Aug 24 Javascript
js 解析 JSON 数据简单示例
Apr 21 Javascript
vue 实现click同时传入事件对象和自定义参数
Jan 29 Vue.js
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 AJAX实例根据邮编自动完成地址信息
2008/11/23 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
PHP重载基础知识回顾
2020/09/10 PHP
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
jQuery写fadeTo示例代码
2014/02/21 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
jquery限定文本框只能输入数字(整数和小数)
2016/01/08 Javascript
jquery ztree实现模糊搜索功能
2016/02/25 Javascript
javascript数据结构中栈的应用之符号平衡问题
2017/04/11 Javascript
Vue实现数字输入框中分割手机号码的示例
2017/10/10 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
Vue拖拽组件开发实例详解
2018/05/11 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
梳理一下vue中的生命周期
2020/12/30 Vue.js
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[01:04]不如跳舞!DOTA2新英雄玛尔斯的欢乐日常
2019/03/11 DOTA
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
浅谈python的深浅拷贝以及fromkeys的用法
2019/03/08 Python
浅谈Python中(&amp;,|)和(and,or)之间的区别
2019/08/07 Python
Python Django路径配置实现过程解析
2020/11/05 Python
英国手工布艺沙发在线购买:Sofas & Stuff
2018/03/02 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
党员自我批评与反省材料
2014/02/10 职场文书
综合实践活动总结
2014/05/05 职场文书
个人担保书格式范文
2014/05/12 职场文书
企业晚会策划方案
2014/05/29 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
体育个人工作总结
2015/02/09 职场文书
活动费用申请报告
2015/05/15 职场文书