element-plus 中 Dropdown 下拉菜单 黑色边框

最新推荐文章于 2024-04-17 10:07:22 发布
最新推荐文章于 2024-04-17 10:07:22 发布
阅读量528 收藏 12
点赞数 10
分类专栏： element-plus 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51589308/article/details/136529105
版权

今天用到了element-plus中 Dropdown 下拉菜单这个组件，使用时发现有一个黑色的边框

去除也很简单，只需添加一个样式即可（使用时注意层级）

  .el-dropdown-link:focus {
    outline: none;
  }

添加完成黑色的边框便去除了

前行蜕变
关注
  • 10
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓，当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况，无论里面是什么 HTML 元素和组件都会由此问题（完美解决方案）
王佳斌
09-11 6318
vue3 element plus组件库，element plus 下拉菜单点击或移入hover会出现黑边框，dropdown下拉菜单移入或点击出现围绕的黑边如何解决，vue3 element el-dropdown周围出现黑边框，element el-dropdown-menu组件鼠标移入时出现黑边框怎么解决，vue3 element plus Dropdown下拉菜单有黑边，element-plus中的dropdown下拉菜单点击或聚焦时会出现黑色外边框，使用element-plus中的下拉菜单，当鼠标
react-ant-dropdown-menu:下拉菜单+基于antd的菜单
03-06
React物下拉菜单下拉菜单基于antd。安装npm install -S @jswork/react-ant-dropdown-menu特性姓名类型必需的默认描述班级名称细绳错误的-- menuOptions 形状错误的--用法导入css @import " ~@jswork/react-ant-...
鼠标悬浮在el-dropdown时，会有黑色边框
无心
07-04 2598
给el-dropdown设置样式setupStyle。
Element-Plus下拉菜单边框去除教程
interest_ing_的博客
03-26 1323
Element-Plus 是 Element UI 的 Vue 3 版本，它提供了一套完整的组件库，用于快速构建企业级的后台产品。在使用 Element-Plus 进行开发时，我们可能会遇到需要自定义组件样式的情况，比如去除下拉框在聚焦时的默认边框。本文将介绍如何使用 CSS 来去除 Element-Plus 下拉框的边框，并简要介绍 Element-Plus 以及 Vue 的相关概念。
element-plus中的下拉菜单el-dropdown获取到焦点或点击出现黑边情况
qq_47101042的博客
07-18 1037
使用elementplus下拉菜单遇到的一个小问题，每次鼠标点击的时候旁边会有一个小黑框，看起来很奇怪， 尝试修改。的需要注意一下层级问题，层级不对的话，css是无效果的)解决办法：(使用less和。
element-plus中的按钮点击后会有黑色边框
m0_68937827的博客
04-17 293
在全局里加上这个样式就可以了。
element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 1703
Element plus下拉框有黑框框怎么取消？
VUE3+element plus使用el-dropdown控件有黑色的边框
nopyramid的博客
11-25 938
在el-dropdown增加class名称，设置outline: unset样式即可。
element + el-dropdown 去掉悬浮上去的黑框
weixin_44384273的博客
03-19 580
element + el-dropdown 去除悬浮上去的黑框
Element-Plus Dropdown 下拉菜单样式修改
m0_66675766的博客
03-21 824
Element框架是我们开发最常用到的一款UI框架，现在就直接演示怎么解决，el-dropdown 下拉菜单样式....亲测有效。
element-plus 去除 [ dropdown ] 有时当鼠标移入标题时会出现外边框
qq_67656809的博客
05-25 4115
通过选中该类名并找到 :focus-visible伪类并设置 outlin 为 unset / none。使用element-plus中的 dropdown 下拉菜单时，点击或聚焦时会出现黑色外边框。outline 和 border 属性很类似。属性是在一条声明中设置多个轮廓属性的简写属性。通过控制台选中时，发现有该属性。outline 是CSS的。
Element Dropdown下拉菜单的使用方法
10-15
在上述代码中，`<el-dropdown>` 包裹了触发下拉菜单的元素（这里是 `span`），`<el-dropdown-menu>` 内包含了下拉菜单的各个选项。`el-icon-arrow-down` 是用于展示下拉箭头的图标。 ### 触发对象 Dropdown 可以与...
ng-multiselect-dropdown：多选下拉组件
01-30
入门产品特点具有单/多选择选项的下拉菜单绑定到任何自定义数据源搜索带有自定义占位符文本的项目极限选择选择/取消选择所有项目自定义主题安装npm install ng-multiselect-dropdown然后将其包含在您的模块中（请...
react-native-dropdown：这是下拉菜单的简单实现
02-25
React本地下拉React Native App的简单下拉菜单！介绍React Native Dropdown在React Native中非常简单，可自定义并且易于使用。 适用于Android和IOS。安装npm i react-native-dropdown --save用法在您的Javascript...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue-Element：点击页面的其他地方，无法关闭时间选择器的下拉框。Uncaught TypeError: Cannot read property ‘disabled‘ of null
weixin_41870211的博客
07-18 1013
问题描述：点击页面的其他地方，无法关闭时间选择器的下拉框 页面报错Vue-Element：Uncaught TypeError: Cannot read property ‘disabled’ of null NetWork报错截图 问题分析 + 解决方案 当使用el-dropdown的时候没有使用子元素el-dropdown-menu就会报错，把el-dropdown-menu加上即可。 错误代码截图 ...
element plus 下拉菜单el-dropdown 白色边框问题
fendouweiqian的博客
01-21 1067
当您点击页面上的元素时，浏览器可能会自动给这个元素添加一个焦点轮廓（outline），这在某些情况下可能会显得不美观。您可以通过 CSS 来去除或自定义这个焦点样式。点击 el-dropdown 时出现一个不期望的白色边框，这通常是因为浏。
使用element-plus中的下拉菜单，当鼠标放上去后出现一个黑框
weixin_52096382的博客
03-15 5635
使用element-plus下拉菜单遇到的一个小问题，因为使用起来，一直有一个黑框挡着，看起来非诚不适，就试着修改一下。解决办法：(使用less和sass的需要注意一下层级问题，层级不对的话，css是无效果的)
element-plus的el-dropdown去除鼠标悬浮或点击时的黑边框
黎小小的博客
11-23 1711
【代码】element-plus的el-dropdown去除鼠标悬浮或点击时的黑边框。
element-plus el-dropdown 实现多级下拉菜单
最新发布
06-05
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> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值