问题

在使用 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 自带有这个功能;

GitHub 加速计划 / eleme / element
15
3
下载
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 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐