Vue 中修改 Element 组件的下拉菜单(Dropdown) 的样式

news2025/1/12 2:43:51

Vue 中修改 Element 组件的下拉菜单(Dropdown) 的样式

今天在项目中碰到一个 UI 改造的需求，需要根据设计图把页面升级成 UI 设计师提供的设计图样式。
到最后页面改造完了，但是 UI 提供的下拉菜单样式全部是黑色半透明的，只能硬着头皮改了。
然后，就有了一下午的头脑风暴。

一开始，我是想着使用 /deep/ 来深度修改样式的，于是就有了下面的代码:

<style lang="less" scoped>
.el-dropdown-menu {
  background: red!important;
}
/* 消除小三角 */
.el-popper[x-placement^=bottom] .popper__arrow{
  //border: none;
}
.el-popper[x-placement^=bottom] .popper__arrow::after {
  border-bottom-color: rgba(0, 0, 0, 0.75)!important;
}

.el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover {
  background-color: transparent!important;
  color: rgba(22, 153, 239, 1) !important;
}
</style>

结果不生效，开始纳闷，为什么什么样式都没有应用上去。
后来查找网上大神，说不可以加 scoped 的私有化。于是我删除后再试，确实是有效，三角也变成了黑色。
在这里插入图片描述

然后，第二个问题又来了。
因为没有加 scoped 私有化，所以系统中所有的 Dropdown 的样式都变成了全黑色且三角也是黑色。
这肯定不行啊，于是又开始头脑风暴。

本来都准备使用原生直接获取 after 的元素了，后来发现不太行，能获取到但是修改 after 伪元素太麻烦了，需要添加样式表什么的。

然后我又在想，我可不可以给他加个 class 类名，我去应用它的样式。于是就有了下面的代码：

// 注意 class=“header-new-drop”
<el-tree
      class="tree"
      :data="trees"
      :props="treeProps"
      @node-click="treeclick"
      node-key="id"
      :auto-expand-parent="autoExpandParent"
      :showIcon="showIcon"
      icon-class="el-icon-arrow-right"
      highlight-current
      @click.stop="click(item,$event)"
  >
    <!--隐藏的新增等图标-->
    <span class="custom-tree-node" slot-scope="{ node, data }">
          <el-dropdown trigger="hover" placement="bottom">
            <span class="el-dropdown-link">
              {{ node.label }}
            </span>
            <el-dropdown-menu slot="dropdown" class="header-new-drop">
              <el-dropdown-item command="rename" @click.native="renameclick(data)" @rename="rename">重命名</el-dropdown-item>
              <el-dropdown-item command="delete" @click.native="deleteclick(data)" @drop="drop">删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
      </span>
  </el-tree>

类名加上之后，就要去用它了，这次我仍然在带有 scoped 私有化标致的样式块中定义：

<style scoped lang="less">
 .header-new-drop {
   background-color: rgba(0, 0, 0, 0.75)!important;
   border: 0px solid #00487f !important;
   border-radius: 5px;
   /deep/ div {    // 注意：这里转深度书写样式修改它的 div 下方 after 样式
     &:after {
       border-bottom-color: rgba(0, 0, 0, 0.75)!important;
     }
   }
 }
 .el-dropdown-menu {
   background-color: rgba(0, 0, 0, 0.75)!important;
   border: 0px solid #00487f !important;
   border-radius: 5px;
 }
 .el-dropdown-menu__item {
   color: #ffffff!important;
   line-height: 40px!important;
   padding: 0 26px!important;
   &:hover {
     background-color: transparent!important;
     border-radius: 5px!important;
     color: rgba(22, 153, 239, 1)!important;
   }
 }
</style>