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 相关文章推荐
IE innerHTML,outerHTML所引起的问题
Jun 04 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
qq悬浮代码(兼容各个浏览器)
Jan 29 Javascript
如何编写高质量JS代码
Dec 28 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
js和jquery分别验证单选框、复选框、下拉框
Dec 17 Javascript
浅谈js中子页面父页面方法 变量相互调用
Aug 04 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 Javascript
vue中axios请求的封装实例代码
Mar 23 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
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中对缓冲区的控制实现代码
2013/09/29 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
PHP使用ajax的post方式下载excel文件简单示例
2019/08/06 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
对象的类型:本地对象(1)
2006/12/29 Javascript
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
js实现延迟加载的方法
2015/06/24 Javascript
JavaScript的设计模式经典之建造者模式
2016/02/24 Javascript
有关easyui-layout中的收缩层无法显示标题的解决办法
2016/05/10 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
js判断节假日实例代码
2017/12/27 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
2019/06/21 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
2020/01/16 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
Numpy中转置transpose、T和swapaxes的实例讲解
2018/04/17 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
对django中render()与render_to_response()的区别详解
2018/10/16 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
Python多线程获取返回值代码实例
2020/02/17 Python
canvas离屏技术与放大镜实现代码示例
2018/08/31 HTML / CSS
《假如》教学反思
2014/04/17 职场文书
贷款担保书范文
2014/05/13 职场文书
合作意向书
2014/07/30 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2015年部门工作总结范文
2015/03/31 职场文书
永远是春天观后感
2015/06/12 职场文书
毕业晚宴祝酒词
2015/08/11 职场文书
如何制定一份可行的计划!
2019/06/21 职场文书
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis
「约定的梦幻岛」作画发布诺曼生日新绘
2022/03/21 日漫
macos系统如何实现微信双开? mac登录两个微信以上微信的技巧
2022/07/23 数码科技