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

最新推荐文章于 2024-08-10 19:00:04 发布
原创 最新推荐文章于 2024-08-10 19:00:04 发布 · 515 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui

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

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

Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓，当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况，无论里面是什么 HTML 元素和组件都会由此问题（完美解决方案）
资深程序员
09-11 1万+
vue3elementplus组件库，elementplus下拉菜单点击或移入hover会出现黑边框，dropdown下拉菜单移入或点击出现围绕的黑边如何解决，vue3elementel-dropdown周围出现黑边框，elementel-dropdown-menu组件鼠标移入时出现黑边框怎么解决，vue3elementplusDropdown下拉菜单有黑边，element-plus中的dropdown下拉菜单点击或聚焦时会出现黑色外边框，使用element-plus中的下拉菜单，当鼠标
Element Plus 去除下拉菜单周黑边
最新发布
2401_89806660的博客
06-14 360
如上图所示，当鼠标移入（hover）和点击时就会围绕一圈黑色边框，但通过本文的方案 100% 完美解决。
element-plus 中 Dropdown 下拉菜单 黑色边框
qq_51589308的博客
03-07 1067
element-plus 中 Dropdown 下拉菜单 黑色边框
element-plus 去除 [ dropdown ] 有时当鼠标移入标题时会出现外边框
qq_67656809的博客
05-25 5794
通过选中该类名并找到 :focus-visible伪类并设置 outlin 为 unset / none。使用element-plus中的 dropdown 下拉菜单时，点击或聚焦时会出现黑色外边框。outline 和 border 属性很类似。属性是在一条声明中设置多个轮廓属性的简写属性。通过控制台选中时，发现有该属性。outline 是CSS的。
解决element-plus在使用下拉菜单时，鼠标移入出现黑框
m0_46662835的博客
05-08 1035
element-plus在使用下拉菜单时，鼠标移入出现黑框。解决方案：样式覆盖outline: none
Element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 5214
Element plus下拉框有黑框框怎么取消？
旅游网站（携程旅行网页学习 vue3+element）
wxid_856d59fjl8ea22的博客
06-13 3038
【携程旅行网页学习】进入element官网，https://element-plus.org/zh-CN/，选择组件，然后选择Basic 基础组件中的Container 布局容器。根据上面的图，选择左上下结构，复制代码。在index.vue文件中，先设置一个简单页面，输入如下代码：（安装了插件就可以输入vue，然后选择默认vue结构，会自动补全vue结构）(1)在views文件夹中新建menu.vue、logo.vue和main.vue三个页面，然后将这三个组成部分的代码分别输入到对应的页面中。
鼠标悬浮在el-dropdown时，会有黑色边框
无心
07-04 4181
给el-dropdown设置样式setupStyle。
element-plus中的下拉菜单el-dropdown获取到焦点或点击出现黑边情况
qq_47101042的博客
07-18 1493
使用elementplus下拉菜单遇到的一个小问题，每次鼠标点击的时候旁边会有一个小黑框，看起来很奇怪， 尝试修改。的需要注意一下层级问题，层级不对的话，css是无效果的)解决办法：(使用less和。
element-plus组件库el-dropdown-menu组件黑框线去除
qq_35641191的博客
08-10 576
element-plus组件库el-dropdown-menu组件黑框线去除
element-plus el-table点击当前行和划过展示鼠标
weixin_43891869的博客
07-10 914
在 Element Plus 的 el-table 组件中，设置滑过行时鼠标的样式可以通过 CSS 来实现。你可以使用 CSS 的 cursor 属性来定义鼠标悬停时的样式。这段 CSS 会应用到你的 el-table 中的每一行（el-table__row），当鼠标滑过时会显示为指定的光标样式。首先，在你的 Vue 组件的。
css：鼠标经过el-dropdown 组件上会出现一个蓝色的小框
彭世瑜的博客
07-08 1954
效果如下，原以为是浏览器的bug，升级后就好了，没想到一直有这个问题。浏览器默认有一个样式，加了一个边框。组件上会出现一个蓝色的小框。知道原因之后，就好处理了。页面刷新后，鼠标经过。
Element Plus Tree 树形控件 嵌套 Dropdown 下拉菜单 无感刷新
weixin_44872023的博客
07-07 1456
element plus 的 tree 组件虽然是比较好用的，但是并不能满足传统OA系统的对 树 的操作，浏览了整个element plus，Tree 树形控件 嵌套 Dropdown 下拉菜单。当然，如果简单的嵌套，似乎没什么难度，所以我给自己上了点难度，不仅要完美实现效果，还要做到无感刷新。注意：每一个方法都应该配合后端来实现的，无感刷新的原理是，前端手动更改了树，而不是每掉一次后端接口就刷新获取数据。组件的示例代码搬过来，运行，可以有以下效果。上代码，讲解放代码注释里。
elementplus中侧边栏怎么创建三级菜单（多级菜单）？
qq_39807469的博客
10-28 2459
这里以三级菜单为例，另外，需要注意，我用的是低版本，其中有个地方和最新的官方文档写法不一样。官方文档中把<el-submenu>写成了<el-sub-menu>,看到区别了吗？这就是细节，这个细节花费了我20分钟才看出来！ <template> <el-menu style="width: 200px;height: calc(100vh - 50px)" :default-active="2"> <el-submenu index=
el-dropdown 结合 el-cascader-panel 实现一级多选二级单选；清除二级选项，清除全部选项效果
Phoebe_helloworld的博客
08-17 6308
el-dropdown 结合 el-cascader-panel 实现一级多选二级单选；清除二级选项，清除全部选项效果。
elementui dropdown实现二级菜单
weixin_43371136的博客
01-06 6735
<el-dropdown @command="handleCommand($event, key)" size="medium" trigger="click" :hide-on-click="false" 是否在点击菜单项后隐藏菜单 v-else :class="value.className" > <span>
Element-Plus Dropdown 下拉菜单样式修改
m0_66675766的博客
03-21 3021
Element框架是我们开发最常用到的一款UI框架，现在就直接演示怎么解决，el-dropdown 下拉菜单样式....亲测有效。
Pycharm一复制就出现光标变成黑块，无法编辑
王较瘦的博客
01-24 2231
光标变黑块是因为输入方式变成了改写方式，INSERT可以切换插入/改写模式。 大多笔记本上是INS键(在键盘上)，外接键盘一般是Insert键。 但有时光按insert也不行，试试下面这个方法。 file -> settings -> Plugins ->搜索ideaVim去掉插件后面的勾-> apply -> ok。原因未知，但是解决了问题！ ...
elment以及elementPlus选中组件出现黑框问题解决！！
夏日漱石的博客
10-05 2546
elment以及elementPlus选中组件出现黑框问题解决！！
el-dropdown下拉菜单中实现点击菜单中的一项再弹出一个el-dropdown下拉菜单
10-28
在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、付费专栏及课程。

余额充值