vue中element-ui表格缩略图悬浮放大功能的实例代码
更新时间：2018年06月26日 10:42:38 作者：十方
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？下面小编通过实例代码给大家介绍vue中element-ui表格缩略图悬浮放大功能，一起看看吧
element-ui界面非常简洁和美观，提供的组件可以满足绝大多数的应用场景，当表格中显示了图片的缩略图时，想要鼠标浮动在缩略图上时放大图片的效果，该如何实现呢？element-ui虽然没有直接提供图片悬浮放大的组件，但是可以使用Popover弹出框组件，一样实现效果，如下：
具体的代码（此处只是图片单元格的代码，其它代码省略）：
<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表格缩略图悬浮放大功能的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了Vue如何获取数据列表展示，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
这篇文章主要介绍了vue数据对象length属性未定义问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)
这篇文章主要介绍了vue如何实现列表自动滚动、向上滚动的效果(vue-seamless-scroll)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
今天小编就为大家分享一篇vue element table 表格请求后台排序的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
TinyMCE 是一款功能强大的富文本编辑器,广泛应用于各种 Web 应用中,本文将详细介绍如何在 Vue 项目中集成 TinyMCE,通过详尽的步骤说明、示例代码展示以及丰富的配置选项,助力开发者轻松实现内容编辑的增强与美化,需要的朋友可以参考下2024-11-11
Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用(适合新手)
在Vue项目中导出Excel表格是常见的功能,特别是在后台管理系统中,为了方便用户将大量数据保存为本地文件,这篇文章主要给大家介绍了关于Vue3如何利用xlsx、xlsx-js-style导出Excel表格使用的相关资料,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了15 分钟掌握vue-next函数式api(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
这篇文章主要介绍了vue-pdf如何通过文件流预览pdf文件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
Vue+Element+Springboot图片上传的实现示例
最近在学习前段后分离，本文介绍了Vue+Element+Springboot图片上传的实现示例，具有一定的参考价值，感兴趣的可以了解一下2021-11-11
这篇文章主要介绍了Vue.extend 编程式插入组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论