关于element-plus的Dropdown 下拉菜单属性的修改

**

关于element-plus的dropdown的下拉菜单的样式修改

**

因为所做的界面和element-plus所提供的颜色不相搭配,所以进行了颜色的修改

1.首先是下拉框本身

![在这里插入图片描述](https://img-blog.csdnimg.cn/05b11ed9fcb34042b646a92f9ae899c2.png

可以看见原本的背景色为白色,字体为黑色,选中样式为蓝色

现在将背景颜色改为红色进行测试,通过修改 .el-dropdown-menu 即可
代码如下:

    /deep/ .el-dropdown-menu__item:not(.is-disabled) {
        color: aqua;
    }

在这里插入图片描述
2.现在背景颜色已经改了,剩下字体颜色和选中样式

这里element-plus对下拉菜单中的选项设置的类名害我找了好半天,最后发现是 .el-dropdown-menu__item:not(.is-disabled) ,先将字体设置为红色

    /deep/ .el-dropdown-menu__item:not(.is-disabled) {
        color: red;
    }

在这里插入图片描述
最后设置下选择后样式,这里element-plus设置的是:focus
依旧设置为我们熟悉的红色,选中样式就设置为黑色吧(原本字体选中样式为蓝色)

     /deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
        background-color: red;
        color: black;
    }

在这里插入图片描述

最后成品展示
在这里插入图片描述

  • 7
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
element-plus 中的 el-dropdown 实现多级下拉菜单的方法如下: 1. 首先需要嵌套多个 el-dropdown-menu 组件,每个 el-dropdown-menu 代表一个下拉菜单的级别,同时需要为每个 el-dropdown-menu 设置唯一的 ref 标识。 2. 接着需要在每个 el-dropdown-menu 中定义需要展示的菜单项,使用 el-dropdown-item 组件实现。 3. 在每个 el-dropdown-menu 上添加 @command 事件监听,当菜单项被点击时,触发该事件,并将所选中的菜单项作为参数传递给事件处理函数。 4. 在事件处理函数中,判断当前点击的菜单项是否有子菜单需要展示,如果有,则通过 ref 获取对应的子菜单 el-dropdown-menu 组件,并使用其 show 方法显示该子菜单。 以下是示例代码: ``` <template> <el-dropdown> <span class="el-dropdown-link">多级下拉菜单</span> <el-dropdown-menu ref="menu1"> <el-dropdown-item @command="handleCommand">选项1</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项2</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项3</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项4</el-dropdown-item> <el-dropdown-item @command="handleCommand">选项5</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> <script> export default { methods: { handleCommand(command) { if (command === '选项1') { const menu2 = this.$refs.menu2; menu2.show(); } else if (command === '选项2') { // do something } else if (command === '选项3') { // do something } else if (command === '选项4') { // do something } else if (command === '选项5') { // do something } } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值