校园网站制度建设网站设计原理

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-treeclass="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>

好啦，大功告成，这样只在这个文件中的 Dropdown 会应用此样式，别的文件不会受到影响。
头脑风暴了一下午。