700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 解决Element UI 组件el-popover图片溢出屏幕可视区域问题(popover定位问题)

解决Element UI 组件el-popover图片溢出屏幕可视区域问题(popover定位问题)

时间:2022-09-21 15:11:48

相关推荐

解决Element UI 组件el-popover图片溢出屏幕可视区域问题(popover定位问题)

分析原因

不固定popver大小,想让图片自适应完整显示时会出现这个情况。

原因:是图片未加载完成,即图片的宽高未确定,el-popover就已经初始化完成了,弹出的位置已确定。等图片加载完,内容撑开了,但是el-popover位置还是原来的,所以会溢出屏幕可视区域。

解决方法

等待img加载完成后更新一下el-popver

this.$refs.popover.updatePopper()

demo代码

非完整组件代码,仅供参考

<template><el-popoverref="popover"@show="showPopover"trigger="hover":placement="placement":offset="-50"><imgclass="popover-img"@load="imgLoad":src="lazy_url"/></el-popover></template><script>export default {props: {placement: {type: String,default: 'right-end'},lazy_url: {type: String,default: ''}},methods: {imgLoad() {this.$refs.popover.updatePopper()},}}</script><style scoped>.popover-img{width:100%;max-height:400px;max-width:400px}</style>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。