网络编程
位置:首页>> 网络编程>> JavaScript>> vue中element-ui表格缩略图悬浮放大功能的实例代码

vue中element-ui表格缩略图悬浮放大功能的实例代码

作者:十方  发布时间:2024-05-29 22:44:31 

标签:element,ui,缩略图

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表格缩略图悬浮放大功能的实例代码网站的支持!

来源:https://segmentfault.com/a/1190000015350408

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com