elememnt-UI Drawer 抽屉 点击关闭或聚焦出现边框

最新推荐文章于 2025-04-15 09:48:09 发布
最新推荐文章于 2025-04-15 09:48:09 发布
阅读量1.2k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： SJF - CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/steve_sjf/article/details/112276441
本文介绍如何通过CSS重置Element UI中的el-drawer组件在获得焦点时的边框样式，以实现更平滑的用户体验。

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

element ui 的 el-drawer 点击聚焦出现边框

 

添加以下即可重置：

.el-drawer:focus:hover, .el-drawer__container:focus:hover, .el-drawer__wrapper:focus{ 

outline: none;

}

 

vue3 - ant design vue 抽屉弹框组件 a-drawer 拖曳侧边修改宽度功能，让Drawer抽屉框可以拖拽边缘动态修改宽度效果，vue3+antd3如何让抽屉组件变成可拖动百分比宽
高级前端工程师
07-25 3163
vue3，ant design vue，antd，抽屉弹框，a-drawer，抽屉组件Drawer，可拖动的抽屉，拖曳，拖拽，按住侧边进行左右拖动改变宽度，鼠标按下拖曳拖拽拖动，动态改变宽度，vue3+antd3如何将drawer抽屉弹框修改成可以左右拖动动态修改宽度，抽屉弹框可拖曳动态调整宽度，可调整大小的抽屉组件，可拖拉宽度抽屉，添加可拖动侧边栏宽度的功能，拖曳改变宽度，抽屉Drawer组件实现鼠标拖拽控制宽度，antd实现宽度拖拽，实现左右可拖动改变宽度的div内容显示区，并且控制拖动范围，鼠标拖拽的
去除element-ui中el-drawer标题自带黑色框
郭宝的博客
04-21 2288
背景 在使用Element-UI中的 <el-drawer 组件时，出现了默认选中标题的问题，如下截图 解决办法： 如果使用了scss预处理器，那么可以通过 ::v-deep 来修改样式，如下代码： ::v-deep :focus { outline: 0; } 或 /deep/ :focus { outline: 0; } 效果图如下： ...
网站快速成型工具-Element UI
weixin_48143996的博客
12-06 6908
Element UIElement UI1 什么是Element UI？？？？2 搭建环境2.1 创建vue项目2.2 安装 element-ui组件2.3 Element UI 引入3 布局3.1 布局3.2 reset.css3.3 满屏填充4 导航条4.1 需求4.2 导航条4.3 路由4.4 页面刷新导航选中问题5 表格：查询列表5.1 测试页面5.2 基本表格5.3 表格修饰5.4 多选![在这里插入图片描述](https://img-blog.csdnimg.cn/87a16b32f4a447e
el-drawer点击的时候为什么有边框_80%人都有的表格强迫症怎么破，一招教你自动添加表格边框...
weixin_33419305的博客
12-23 550
相信对于许多朋友来讲，在使用Excel的时候都会有一个强迫症，那就是新增表格数据的时候，一定会重新添加一次表格边框。如果某些数据每月边框，心里面就会显得非常别扭。今天我们就来学习一下，如何在新增数据的时候实现表格边框的自动添加。一、案例演示案例说明：如上图所示，我们在新增人员信息只会，我们都会下意识的添加一次表格边框。如果每次都这样添加，就会显得比较繁琐。今天我们来学习如何根据数据自动添加边框。二...
element-plus的Tooltip被点击后出现边框
baidu_38953088的博客
06-30 552
element-plus的Tooltip被点击后出现边框
Element UI
qq_52469095的博客
02-01 1万+
VUE 框架中 Element-UI 组件入门
el-drawer打开后标题处会有聚焦边框
gdjychbsh的博客
04-20 484
解决办法 <style scoped> /deep/ :focus{outline:0;} </style>
element-ui 抽屉组件（el-drawer ） 二次封装 增加resize拖曳改变宽度大小，配合表格实现快捷方式打开抽屉展示详情及操作
qq_53675083的博客
07-07 6227
可配合自定义表格进行操作数据，点击表格某一行进行抽屉展示，可上下页切换查看及功能操作，1.快捷键esc关闭抽屉，// 快捷键控制上下翻页 shiftKey+上键 上一页 shiftKey加下键 下一页 shiftKey加左键 开启弹框展示第一条数据 shiftKey加右键关闭弹框上代码 js实现拉伸部分......
element ui 抽屉的用法 以及 去掉点击时有条黑线
weixin_38644630的博客
01-16 1130
element ui 抽屉的用法 以及 去掉点击时有条黑线 1.效果 2.使用代码 <el-drawer :visible.sync="drawer" :with-header="false" style="color:#000;zIndex:999;" size="20%" :append-to-body="true"> //这里面的内容，可以自行定义 <yp-user-info :currentUser="currentUser" @closeDrawer="c
对 Ant-design 的 Drawer 组件 增加拖拽效果
chenyajundd的博客
07-23 1899
实现这个需求首先确定按下元素的位置，为按下元素添加相应事件，根据移动的距离动态赋值内容容器的宽度，再根据Drawer的width：auto，自动撑开Drawer组件即可。当然实现过程中也有其他小 bug，比如选中文字，设置最小宽度等等，其实还有小问题，文章中并没有呈现，就是如果里面的内容时 iframe 引入的话，会导致移动事件失效，这个会单独写一篇文章，主要方便有相同问题的朋友进行搜索解决问题。
element-ui中el-drawer组件打开自动聚焦问题
inticaler的博客
02-24 2753
el-drawer组件设置了withHeader为false的情况下，会自动聚焦里面的可聚焦的第一个组件，例如dataPicker的弹框或者input框，select框等 解决方法： // html修改 <el-drawer :visible.sync="drawerShow" :with-header="true" :wrapperClosable="true" ></el-drawer> // 样式修改 /deep/ .el-drawer{ .el-d.
el-drawer打开自动获取焦点问题
yanby921005的博客
07-05 530
如果设置了withHeader为false，打开之后默认会获取焦点，设置为true即可。
el-drawer打开自动聚焦问题解决
Boom934的博客
12-22 736
在开发中遇到el-darwer打开会自动聚焦，导致页面其他地方的输入框无法聚焦的问题，网上的方法都没有实际解决，所以只能想其他方法，通过控制台看到有带focus的类名，最后通过让el-drawer__sr-focus失去焦点本质上解决了问题。希望能帮到有同样问题的同学。该问题是element-plus遇到的，如果是element可能有所不同。
Element-UI-快速入门（极简教程）_element ui
2401_89758080的博客
12-20 5396
ElementUI是一套基于VUE2.0的桌面端组件库，ElementUI提供了丰富的组件帮助开发人员快速构建功能强大、风格统一的页面。官网地址：http://element-cn.eleme.io/#/zh-CN-- 引入ElementUI样式 -->-- 引入ElementUI组件库 -->
Element-UI详解
热门推荐
科技追踪者的专栏
05-22 2万+
Element-UI 是一个功能强大、使用便捷的 Vue.js UI 组件库，它为开发者提供了一整套解决方案，大大提高了前端开发的效率和质量。通过本文的介绍，相信你已经对 Element-UI 有了深入的了解。无论是企业后台、内容管理系统还是在线教育平台，Element-UI 都能帮助你快速构建出高质量的应用。希望你在实际项目中能充分利用 Element-UI 的强大功能，开发出更多优秀的应用。
Element-UI 入门介绍
最新发布
2501_91537388的博客
04-15 2109
Element-UI 是一个基于 Vue.js 的 UI 组件库，旨在为开发者提供一个清晰、易用、高质量的 UI 组件集合。高质量组件：包括表单、按钮、导航、布局、弹窗、表格等常用组件，涵盖了前端开发的大部分需求。响应式布局：支持 PC 和移动端的适配，帮助开发者创建自适应的页面。可定制化：可以根据需求自定义主题样式、组件样式等，适应不同的设计要求。易于集成：简单易用，方便和 Vue 项目进行集成，帮助开发者提高开发效率。
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
killerdoubie的博客
03-17 2521
el-drawer 不重复触发，el-drawer 只触发一次，el-drawer关闭后不能再次打开
修改elementui Tooltip组件箭头背景及边框问题
晓光同学的博客
03-21 2264
css设置，无需封面
点击el-drawer抽屉之外关闭问题
coinisi_li的博客
05-08 1375
遇到问题el-drawer抽屉点击空白处会关闭，与el-dialog类似。
el-drawer标题的关闭按钮怎么调整位置
04-02
### 自定义 `el-drawer` 标题关闭按钮位置 在 Element UI 的 Vue 组件库中，`el-drawer` 默认提供了一个右上角的关闭按钮。如果需要自定义该关闭按钮的位置，则可以通过覆盖默认样式或者重新设计模板来实现。 以下是两种常见的方法： #### 方法一：通过 CSS 调整关闭按钮的位置 可以利用 `::v-deep` 或 `/deep/` 来修改 `el-drawer__header` 中关闭按钮的样式[^1]。具体操作如下： ```css /* 修改关闭按钮的位置 */ .el-drawer__header .el-button--close { position: absolute; top: 10px; /* 设置距离顶部的距离 */ right: auto; /* 取消右侧定位 */ left: 10px; /* 将其移动到左侧 */ } ``` 上述代码会将关闭按钮从右上角移至左上角，并调整其与边框之间的间距。 --- #### 方法二：完全自定义 Drawer 头部区域 为了更灵活地控制头部布局，可以选择隐藏默认的标题栏并自行创建一个新的标题部分。这可以通过设置 `title=""` 属性为空字符串以及使用插槽来自定义内容完成。 下面是一个完整的例子： ```vue <template> <el-drawer :visible.sync="drawerVisible" title="" custom-class="custom-drawer"> <!-- 自定义标题 --> <div class="custom-header"> <span>我的自定义标题</span> <el-button type="text" icon="el-icon-close" @click="handleClose"></el-button> </div> <!-- 抽屉主体内容 --> <div class="drawer-content"> 这里是抽屉的内容... </div> </el-drawer> </template> <script> export default { data() { return { drawerVisible: false, }; }, methods: { handleClose() { this.drawerVisible = false; }, }, }; </script> <style scoped> .custom-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #ebeef5; } .custom-header span { font-size: 18px; color: #303133; } .custom-header .el-button { padding: 0; line-height: inherit; } </style> ``` 在这个示例中，我们手动构建了标题区和关闭按钮的行为逻辑，从而实现了高度定制化的效果。 --- ### 总结 无论是通过简单的 CSS 定位还是彻底重构标题结构，都可以满足不同场景下的需求。推荐优先尝试第一种方式，因为它改动较小；而第二种适用于更加复杂的需求场合。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值