Element ui | popover弹出框改变背景色和小三角形颜色

Igiveufireworks

已于 2023-01-30 11:07:56 修改

阅读量6.9k

点赞数 4

文章标签： javascript git 前端 vue.js elementui

于 2023-01-30 10:36:57 首次发布

本文链接：https://blog.csdn.net/Igiveufireworks/article/details/128798260

版权

本文介绍如何在Vue项目中通过SCSS或CSS自定义.el-popover组件的样式，包括背景颜色、边框颜色等，同时提供了添加特定类名避免样式污染的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始状态：

最终效果：

如果是vue项目，不能在xxx.vue文件中更改css，而是在被main.js引入的scss或css文件中更改：

// 改变pop框颜色
.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
.el-popper[x-placement^=top] .popper__arrow::after {
  border-top-color: #000022;
}
.el-popper[x-placement^=top] .popper__arrow {
  border-top-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: #000022;
}
.el-popper[x-placement^=bottom] .popper__arrow {
  border-bottom-color: #000022;
}

注意：在实际项目中，记得给el-popover添加新类名，css使用交际选择器，以免作用在其他元素上：

<el-popover
    placement="top"
    width="400"
    trigger="hover"
    popper-class="popover" <!--添加类名-->
/>

// 使用css交集选择器
.popover.el-popover {
  background: #000022;
  border-color: #000022;
  border-radius: 10px;
  opacity: 0.92;
  color: #fff;
}
//其他略