elementUI 中使用 Popover 弹出框 el-popover自如何自定义样式？（出现 popper-class 不生效，如何解决？）

作者：System 时间：2024年08月27日分类：所有,elementui 字数：645

这篇文章距离上次修改已过222天，其中的内容可能已经有所变动。

在 Element UI 中使用 el-popover 组件时，可以通过设置 popper-class 属性来为弹出框添加自定义样式。你需要创建一个 CSS 类并将其绑定到 popper-class 属性。这样，弹出框的内部结构会应用你的自定义样式。

下面是一个简单的例子：

<template>
  <el-popover
    trigger="hover"
    placement="top"
    width="200"
    popper-class="custom-popover"
  >
    <p>这是一些内容，这是一些内容。</p>
    <div slot="reference" class="popover-reference">悬停我</div>
  </el-popover>
</template>

<style>
  .custom-popover {
    color: #fff;
    background-color: #000;
    /* 添加其他你需要的样式 */
  }
</style>

在上面的代码中，.custom-popover 类定义了弹出框的自定义样式。当你将 popper-class 设置为 custom-popover 时，弹出框会应用这些样式。你可以根据需要添加任何 CSS 属性来自定义弹出框的外观。

elementUI 中使用 Popover 弹出框 el-popover自如何自定义样式？（出现 popper-class 不生效，如何解决？）

评论已关闭

推荐阅读