VUE3+element plus使用el-dropdown控件有黑色的边框

最新推荐文章于 2024-03-19 11:36:45 发布
最新推荐文章于 2024-03-19 11:36:45 发布
阅读量882 收藏 9
点赞数 7
分类专栏： VUE3+element plus实战 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nopyramid/article/details/134610551
版权

初始效果如下

修改后效果正常

在el-dropdown增加class名称，设置以下样式即可

.unloggen-btn :deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}

尘烟生活家
关注
  • 7
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓，当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况，无论里面是什么 HTML 元素和组件都会由此问题（完美解决方案）
王佳斌
09-11 6093
vue3 element plus组件库，element plus 下拉菜单点击或移入hover会出现黑边框，dropdown下拉菜单移入或点击出现围绕的黑边如何解决，vue3 element el-dropdown周围出现黑边框，element el-dropdown-menu组件鼠标移入时出现黑边框怎么解决，vue3 element plus Dropdown下拉菜单有黑边，element-plus中的dropdown下拉菜单点击或聚焦时会出现黑色外边框，使用element-plus中的下拉菜单，当鼠标
Vue3+element-plus-table-dragable(Sortable.js)实现表格拖动排序
06-15
2022/09/02更新： 下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。 没有上网条件的可以在这里下载已经更新。 说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。 =======以下是之前的说明===== 原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。 需要安装依赖：npm i -S vuedraggable@next
ElementPlus-Dropdown下拉菜单，鼠标移入显示黑色边框问题处理
zhang338448的博客
03-08 270
【代码】ElementPlus-Dropdown下拉菜单，鼠标移入显示黑色边框问题处理。
element + el-dropdown 去掉悬浮上去的黑框
最新发布
weixin_44384273的博客
03-19 444
element + el-dropdown 去除悬浮上去的黑框
element plus下拉框el-dropdown有黑框框怎么取消？
ZYXKN的博客
02-17 1236
Element plus下拉框有黑框框怎么取消？
关于 element-plus 下拉菜单 el-dropdown 的黑框问题
yipisaosaode的博客
12-05 211
我这里是类为 user-info 的元素。
vue3通过el-dropdown实现动态菜单切换页面
青莳的博客
11-29 1234
接下来是菜单页面menu.vue。首先是主页index.vue。
vue3 中使用el-dropdown时，slot报错解决方法
前端打工人的博客
02-03 2062
vue3 中使用el-dropdown时，页面显示报错，vscode也会有报错提示 是因为vue 3.x 增加了v-slot的指令，去掉了原来的slot，slot-scope属性。
踩坑记9 vue3全屏、el-dropdown高度设置等
Alloom的博客
08-03 2264
2021.8.3 做一些界面样式切换的小功能。 坑28（css、选择器、统一间距）：目标是选择一个父元素的全部子元素，通过margin设置统一的左右间距。使用的选择器是element > *，其中'>'表示在element的子元素中选择，'*'表示选择所有元素，相关代码如下。 .setMenuBox{ display: flex; flex-direction: row; align-items: center; } .setMenuBox > *...
el-dropdown下拉菜单样式
m0_65930596的博客
01-19 750
【代码】el-dropdown下拉菜单样式。
element-plus的el-dropdown去除鼠标悬浮或点击时的黑边框
黎小小的博客
11-23 1468
【代码】element-plus的el-dropdown去除鼠标悬浮或点击时的黑边框。
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）
05-03
Vue3+Vite4+Element-Plus+TypeScript编写的一款后台管理系统（兼容移动端）；精简版是基于 vue-pure-admin 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 element-plus 的情况下仍然低于...
vue3-element-admin：vue3 + element-plus + typescript 后台管理系统
05-04
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板（前后端开源）。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue+element搭建后台小总结 el-dropdown下拉功能
10-16
主要为大家详细介绍了vue+element搭建后台小总结，el-dropdown下拉功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
element-plus 去除 [ dropdown ] 有时当鼠标移入标题时会出现外边框
qq_67656809的博客
05-25 3915
通过选中该类名并找到 :focus-visible伪类并设置 outlin 为 unset / none。使用element-plus中的 dropdown 下拉菜单时，点击或聚焦时会出现黑色外边框。outline 和 border 属性很类似。属性是在一条声明中设置多个轮廓属性的简写属性。通过控制台选中时，发现有该属性。outline 是CSS的。
element-plus 中 Dropdown 下拉菜单 黑色边框
qq_51589308的博客
03-07 434
element-plus 中 Dropdown 下拉菜单 黑色边框
鼠标悬浮在el-dropdown时，会有黑色边框
无心
07-04 2422
给el-dropdown设置样式setupStyle。
element-plus中的下拉菜单el-dropdown获取到焦点或点击出现黑边情况
qq_47101042的博客
07-18 971
使用elementplus下拉菜单遇到的一个小问题，每次鼠标点击的时候旁边会有一个小黑框，看起来很奇怪， 尝试修改。的需要注意一下层级问题，层级不对的话，css是无效果的)解决办法：(使用less和。
Vue3+element plus实现el-tab-pane拖拽排序(基于Sortable.js)
06-08
实现el-tab-pane拖拽排序的步骤如下： 1. 安装sortablejs和@vue/composition-api ``` npm install sortablejs @vue/composition-api --save ``` 2. 在Vue组件中导入Sortable和reactive ```javascript import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; ``` 3. 创建一个响应式对象来存储tab列表 ```javascript const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); ``` 4. 在页面中使用el-tabs和el-tab-pane组件来展示tab列表，并使用v-for指令循环展示tab列表 ```html <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> ``` 5. 在mounted钩子函数中使用Sortable创建可拖拽的tab列表，并监听其排序事件 ```javascript mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; tabs.list.splice(toIndex, 0, tabs.list.splice(fromIndex, 1)[0]); } }); } ``` 6. 完成后，你就可以在页面上看到一个可拖拽排序的tab列表了。 完整代码如下： ```html <template> <el-tabs v-model="activeTab"> <el-tab-pane v-for="(tab, index) in tabs.list" :key="index" :label="tab.label"> {{ tab.content }} </el-tab-pane> </el-tabs> </template> <script> import Sortable from 'sortablejs'; import { reactive } from '@vue/composition-api'; export default { name: 'SortableTabs', setup() { const tabs = reactive({ list: [ { label: 'Tab 1', content: 'Content of Tab 1' }, { label: 'Tab 2', content: 'Content of Tab 2' }, { label: 'Tab 3', content: 'Content of Tab 3' } ] }); return { tabs }; }, mounted() { let el = this.$el.querySelector('.el-tabs__nav-wrap'); new Sortable(el, { animation: 150, onEnd: (evt) => { let fromIndex = evt.oldIndex; let toIndex = evt.newIndex; this.tabs.list.splice(toIndex, 0, this.tabs.list.splice(fromIndex, 1)[0]); } }); } }; </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

尘烟生活家

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值