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 Object.defineProperty及ProxyVue实现双向数据绑定
这篇文章主要介绍了Vue Object.defineProperty及ProxyVue实现双向数据绑定,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-09-09
本篇文章主要介绍了Vue+Flask实现简单的登录验证跳转的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要为大家详细介绍了VUE多个下拉框实现双向联动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
本文主要介绍了element日期组件实现只能选择小时或分钟，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
解决vuejs 使用value in list 循环遍历数组出现警告的问题
今天小编就为大家分享一篇解决vuejs 使用value in list 循环遍历数组出现警告的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合，这篇文章主要介绍了vue的指令和插值总结,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了vue学习笔记之slot插槽用法,结合实例形式对比分析了vue使用slot插槽的相关操作技巧与注意事项,需要的朋友可以参考下2020-02-02
这篇文章主要介绍了Vue和Bootstrap的整合思路详解,需要的朋友可以参考下2017-06-06
父子组件通讯是指在前端开发的组件化架构中,父组件与子组件之间互相传递数据和触发功能的一种机制,这种机制使得组件能够保持独立性的同时,也能协同工作,本文给大家介绍了Vue父子组件通讯的四种方法,需要的朋友可以参考下2024-07-07
Element plus中el-input框回车触发页面刷新问题以及解决办法
在el-form表单组件中el-input组件输入内容后按下Enter键刷新了整个页面,下面这篇文章主要给大家介绍了关于Element plus中el-input框回车触发页面刷新问题以及解决办法,需要的朋友可以参考下2024-03-03
最新评论