screenfull el-popover
时间: 2023-09-12 12:04:06 浏览: 50
根据引用,screenfull el-popover的问题是由于图片加载未完成导致的。当图片加载完之前,el-popover已经初始化完成并确定了弹出位置。而当图片加载完成后,内容撑开了,但是el-popover的位置仍然保持原来的位置,导致溢出屏幕可视区域。
根据引用,可以通过在点击下拉选项中的内容时触发对应的父弹框,而不是将内容添加到body标签中,这样刚刚打开的popover就不会消失了。
根据引用,可以在el-popover的模板中为图片添加一个@load事件,当图片加载完成时,调用updatePopper()方法更新popover的位置。
综上所述,解决screenfull el-popover的问题可以通过以下步骤:
1. 确保图片加载完成后再显示el-popover。
2. 在点击下拉选项中的内容时触发对应的父弹框。
3. 在el-popover的模板中为图片添加@load事件,并在事件处理函数中调用updatePopper()方法更新popover的位置。
参考代码如下:
```html
<template>
<el-popover ref="popover" @show="showPopover" trigger="hover" :placement="placement" :offset="-50">
<img class="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>
```
以上是解决screenfull el-popover问题的方法。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [解决Element UI 组件el-popover图片溢出屏幕可视区域问题(popover定位问题)](https://blog.csdn.net/weixin_41308436/article/details/124570250)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [element中popover弹框中有选择器,点击后popover消失的解决办法](https://blog.csdn.net/m0_56227492/article/details/122610488)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]