element plus 的popover组件如何去自适应位置
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
问题
在使用 2.x 版本的element-UI时,里面的 Popover 气泡卡片 组件,有自带的 自动适应位置 的功能;在 element plus 中,直接使用,已经无法自适应气泡弹窗的位置了。
解决方式
想要在页面里,当 Popover 弹出框的位置接近边界时,应该自动切换到相反的方向进行显示。可添加以下代码实现:
<template>
<el-popover
placement="bottom"
title="Title"
:width="200"
trigger="click"
content="this is content, this is content, this is content"
:fallback-placements="['bottom', 'top', 'right', 'left']"
>
<template #reference>
<el-button>Click to activate</el-button>
</template>
</el-popover>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
</script>
解析
核心::fallback-placements="['bottom', 'top', 'right', 'left']"
注意: 适用于 ele-plus版本, 2.x 版本的 element 自带有这个功能;
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:4 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐


所有评论(0)