vue 设置element ui的el-popover的样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue 设置element ui的el-popover的样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

设置element ui的el-popover的样式需要自定义popper-class：
el-popover 自定义样式,# Vue 2.x,vue.js,ui,javascript

自定义popper-class="tips-con"，如下：

<template>
        <el-popover width="300" trigger="hover" popper-class="tips-con" title="提示" placement="top-start">
          <div class="operate-btn" slot="reference">
            <el-button size="mini" type="primary">消息提示</el-button>
          </div>
          <span slot="default">
            这是一个详情
          </span>
        </el-popover>
</template>

在当前文件样式中，不加 scoped 写一份：

<style lang="less">
/**写样式要注意，写在不带scoped的 style 里 */
// 修改下面的小三角，属性名根据组件的placement位置做相应修改
.tips-con[x-placement^='left'] .popper__arrow::after {
  border-left-color: #4728d4;
}
.tips-con[x-placement^='right'] .popper__arrow::after {
  border-right-color: #ea4e3d;
}
.tips-con[x-placement^='bottom'] .popper__arrow::after {
  border-bottom-color: #dfea3d;
}
.tips-con[x-placement^='top'] .popper__arrow::after {
  border-top-color: #12dceb;
}
// 修改title的颜色
.tips-con .el-popover__title {
  color: rgb(230, 51, 236);
}
.tips-con {
  background-color: #61dd14;
  color: #fff;
  font-size: 18px;
  padding: 5px;
  border: #e7240a 1px solid;
}
</style>