el-popover自定义样式

要自定义el-popover的样式，可以通过设置全局样式或者通过popper-class绑定自定义类名popperOptions来实现。

全局样式的设置可以在App.vue文件中添加以下样式：

.el-popover {
  position: absolute;
  background: rgba(22, 38, 94, 1) !important;
  min-width: 73%;
  width: 100%;
  border: 0 solid #EBEEF5;
  padding: 12px;
  z-index: 2000;
  margin-right: 55px;
  color: white;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
  word-break: break-all;
}

.el-popper[x-placement^=top .popper__arrow::after {
  bottom: -0.2px;
  margin-left: -6px;
  border-top-color: rgba(22, 38, 94, 1) !important;
}

另外，你也可以在el-popover组件中使用popper-class属性来绑定自定义类名popperOptions。例如：

<el-popover width="300" trigger="hover" popper-class="popperOptions" placement="top-start">
  <div class="operate-btn" slot="reference">
    <el-badge :value="12" class="item">
      <i class="icon el-icon-chat-line-round"></i>
    </el-badge>
  </div>
  <span slot="default">你有99条未读消息，请及时查看</span>
</el-popover>

然后，在样式的根文件中，添加popperOptions类名的样式规则：

.popperOptions[x-placement^=left .popper__arrow::after {
  border-left-color: #EA4E3D;
}

.popperOptions[x-placement^=right .popper__arrow::after {
  border-right-color: #EA4E3D;
}

.popperOptions[x-placement^=bottom .popper__arrow::after {
  border-bottom-color: #EA4E3D;
}

.popperOptions[x-placement^=top .popper__arrow::after {
  border-top-color: #EA4E3D;
}

.popperOptions {
  background-color: #EA4E3D;
  color: #FFFFFF;
  font-size: 18px;
  padding: 5px;
  border: #EA4E3D;
}

这样就可以根据自己的需求来自定义el-popover的样式了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-popover修改样式](https://blog.csdn.net/sinat_42888557/article/details/98631586)[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* *3* [el-popover 样式修改](https://blog.csdn.net/weixin_44980864/article/details/119774065)[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 ]