ElementPlus-Dropdown下拉菜单,鼠标移入显示黑色边框问题处理

文章讨论了如何在ElementPlus库中,通过修改`.el-tooltip__trigger:focus-visible`的CSS规则,移除dropdown组件在鼠标移入标题时出现的外边框,以优化用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在Element UI的`el-dropdown`组件中,如果你想要实现点击菜单中的某一项后再次弹出一个新的下拉菜单,你可以通过监听原下拉菜单中的`click`事件,然后在处理函数中动态创建并显示新的`el-dropdown`。以下是一个简单的步骤说明: 1. 首先,在原`el-dropdown`的选项项中,给每一项添加一个自定义属性,比如`data-popover`,用于标识该选项需要打开的新下拉菜单。 ```html <template> <el-dropdown v-model="dropdownVisible" @command="handleCommand"> <!-- 原始下拉菜单 --> <el-menu-item-group title="一级菜单"> <el-menu-item :index="0" data-popover="二级菜单1">菜单1</el-menu-item> <el-menu-item :index="1" data-popover="二级菜单2">菜单2</el-menu-item> </el-menu-item-group> </el-dropdown> </template> ``` 2. 然后,在Vue实例中,为`handleCommand`函数添加逻辑,当点击特定菜单项时,检查其`data-popover`属性,并根据这个值来判断是否需要展示新的下拉菜单。这里可以利用`ref`来引用新下拉菜单的元素,并设置初始状态为隐藏。 ```javascript <script> export default { data() { return { dropdownVisible: false, newDropdown: null, // 新的el-dropdown ref }; }, methods: { handleCommand(command) { if (command.dataPopover) { this.newDropdown = document.querySelector(`[data-popover="${command.dataPopover}"]`); this.newDropdown.show(); // 展示新的下拉菜单 } else { // 如果没有指定popover,则关闭当前下拉菜单 this.dropdownVisible = false; } }, }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值