vue3 + element-plus 使用Image 图片组件,点击图片预览功能。发现在table中,会出现预览的图片被遮罩。

使用element-plus的图片组件el-image的代码:

 <el-image
   style="width: 100px; height: 100px"
   :src="url"
   :preview-src-list="[url]"
   :initial-index="0"
   fit="cover"
 />

vue3 + element-plus 使用 element-plus的Image 图片组件,点击图片预览功能。发现在table中,会出现 预览的图片被遮罩。bug如图:

在这里插入图片描述
审查元素后,感觉应该是定位fixed导致的,
因为如果父元素的 transform, perspective 或 filter 属性不为 none 时,fixed 元素就会相对于父元素来进行定位 的。

解决办法

因为咱们使用的是vue3,而vue3的新特性中有一项 Teleport 标签,它可以将我们的模板移动到 DOM中的其他位置。element-plus基于vue3的plus版本中,新增了一项新属性:preview-teleported

在这里插入图片描述
所以我们只需要在el-image标签中增加preview-teleported=“true” 属性即可。

在这里插入图片描述

  • 39
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 23
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 23
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

回忆哆啦没有A梦

你的鼓励将是我创作的最大动力!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值