element drawer去掉弹框出现的蓝框

最新推荐文章于 2024-03-20 18:12:33 发布
原创 最新推荐文章于 2024-03-20 18:12:33 发布 · 339 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#element

最近用element 的抽屉 发现title 还有整个抽屉 在点开的时候会有一个蓝色的框 看着真的不好看 合计去掉 收藏下面 有效

<style lang="scss" >         
   // 去掉弹窗出现时的出现蓝框
:focus {
  outline: 0;
}
</style>
去除element-ui中el-drawer标题自带黑色框
郭宝的博客
04-21 2332
背景 在使用Element-UI中的 <el-drawer 组件时，出现了默认选中标题的问题，如下截图 解决办法： 如果使用了scss预处理器，那么可以通过 ::v-deep 来修改样式，如下代码： ::v-deep :focus { outline: 0; } 或 /deep/ :focus { outline: 0; } 效果图如下： ...
Vue3 - Element Plus 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
🏆 前端领域优质创作者
03-20 7971
vue3，element-plus，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，deep失效了怎么办，当设置append-to-body=true时如何覆盖组件样式，改不了弹框样式，elementPlus弹窗Dialog添加append-to-body后修改原样式无效，如何解决使用append-t后覆盖修改样式不生效，嵌套的append-to-body属性导致内层弹框样式设置不上，append-to-body后更改d
element-ui 抽屉drawer出现蓝框bug
会一点前端、会一点Java、会一点Python
09-08 1590
最近发现，element-ui的抽屉有bug，首先是自带的title，在打开抽屉时，默认出现聚焦的蓝色框框。如果没有使用抽屉组件自带的title，那页面中第一行的第一个tab或者button，也会有类似的问题出现 针对el-tabs出现蓝框的解决办法： /deep/.el-tabs__item:focus.is-active.is-focus { box-shadow: none; } 针对自带的title出现蓝色框框的解决办法： /deep/ :focus { outline.
elemen-ui点击Drawer出现蓝框bug
meng2lin的博客
10-14 310
在写vue项目中，使用element的Drawer插件时，点击会有蓝框，直接上代码。 <style lang="scss"> :focus { outline: 0; } </style>
Element Drawer 抽屉改变默认宽度和高度
热门推荐
Dear_Miriam的博客
07-18 1万+
Element Drawer 抽屉改变默认宽度和高度
el-drawer自适应高度
qq_41695498的博客
10-17 4478
.el-drawer__body { overflow: auto; } .el-drawer__container ::-webkit-scrollbar { display: none; }
elementUI Drawer 抽屉 Dialog 对话框 等弹出组件的遮罩层以及多层遮罩解决办法
小糖穿越火线
10-30 1万+
append-to-body 解决多层遮罩层覆盖的问题 <el-dialog title="编辑处理结果" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" append-to-body > :modal-append-to-body=“false” 解决一层遮罩层覆盖问题 <el-dialog title="编辑处理结果" :visible.sync="dialog
精选资源
根据element+vue 自定义dialog+drawer组件 弹窗+抽屉 无覆盖 + 可拖拽.7z
12-09
在这个特定的案例中，我们讨论的是如何在Element UI的基础上自定义Dialog（对话框）和Drawer（抽屉）组件，以实现无覆盖和可拖拽的功能。 Dialog组件通常用于显示临时的信息或者进行一些交互操作，而Drawer则常用于...
element drawer上下拖动
limmt2020的博客
08-05 971
在App.vue中写样式。在main.js中引入。
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
🏆 前端领域优质创作者
03-20 4408
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在elementui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2elementUIel-dialog修改了body样式不生效问题解决方案，element组件
去除 element-ui 打开Drawer 标题自带蓝色框
cnsummerLi
12-31 7932
1.el-ui文档实例 2.代码实现 不要把样式写在 scoped中 否则不生效 <style rel="stylesheet/scss" lang="scss"> :focus{ outline:0; } </style>
解决element-ui(vue-element-admin)组件el-drawer弹出自动聚焦的bug
不锈钢大铁锤的博客
01-18 4293
在使用el-drawer组件时,会出现自动聚焦第一个组件的bug 可以使用如下方法解决: 在drawer中设置一个div,设置ref和tabindex属性用于定位, 为drawer设置opened事件 在事件中手动聚焦在div中(注意: 此处的_this为在create中手动定义的this) ...
应用element-ui中Drawer 抽屉并去除Drawer 标题自带蓝色框
syx_cainiao的博客
06-22 7243
在做项目的时候页面上需要设置的东西太多，所以将所有的设置按钮归于一个，点击后出现一个抽匣，在上面做设置就是了 Drawer 抽屉的设置 <el-drawer title="我是标题" :with-header="drawerProp.withHeader" size="35%" :append-to-body="drawerProp.appendToBody" :visible.sync="drawerProp.drawe
element-ui Drawer 内容全部屏幕高度不能滑动
weixin_39583421的博客
10-29 1165
解决办法： /1.显示滚动条：当内容超出容器的时候，可以拖动：/ .el-drawer__body { overflow: auto; } /2.隐藏滚动条，太丑了/ .el-drawer__container ::-webkit-scrollbar { display: none; } 作者：昨夜剑客 链接：https://juejin.cn/post/6992807144949039111 来源：稀土掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 ...
element-ui Drawer 内容全部屏幕高度不能滑动
guochengabcd的博客
07-09 4999
解决办法： /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/ .el-drawer__body { overflow: auto; } /*2.隐藏滚动条，太丑了*/ .el-drawer__container ::-webkit-scrollbar { display: none; }
去除自定义Dialog边框和标题蓝色线条
qq_15741603的博客
09-06 1369
如何去除自定义Dialog边框和标题蓝色线条？下面的情况相信很多人都遇到过，特别是在4.几的系统上经常会看到。那么如何去掉边框和蓝色的线条呢？ 非常简单，两行代码搞定！ requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setBackgroundDrawable(new ColorDrawable(0));只需要在setCont
elementUI Drawer 抽屉打开时表单自动聚焦问题解决
小白的笔记
07-08 1670
问题：打开drawer弹窗后时间选择器自动聚焦。 解决：在时间选择器上添加disabled属性，打开drawer抽屉时先让选择器禁用disabled=true， 在页面渲染完成后再打开选择器的禁止。如果只是输入框直接执行表单的blur事件。 ...
去除 element-ui 打开drawer 标题自带蓝色框
kikikiuu的博客
06-05 2182
今天项目要求需要做一个drawer,在配置的时候， 发现每次打开都会有个蓝色的框框显示，然后过一会就会消失 实在是太丑了，本星人受不了 决定研究把他去除 在百度的时候，发现原来是element里面自带的 解决方法如下： <style lang="scss" scoped> /deep/ :focus{outline:0;} </style> 直接加一个deep 穿梭给element更改样式，当他聚焦的时候outline为零 ...
element -ui如何去掉原来的蓝色下划线
JingNan_的博客
09-08 2457
/* 原理找到蓝色下划线然后进行设置 */ .el-menu–horizontal>.el-menu-item.is-active{ border: transparent !important; } 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片: 当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。 如何插入一段漂亮的代码片 去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片. // An highlighted block var foo = 'bar';
el-drawer 关闭按钮放弹框外边
最新发布
03-26
### 修改 `el-drawer` 关闭按钮的位置 Element UI 的 `el-drawer` 是一个侧边抽屉组件，默认情况下其关闭按钮位于抽屉内部顶部区域。如果希望将该关闭按钮移至弹框外部，则需要通过自定义样式和结构来实现这一需求。 以下是具体方法： #### 方法一：使用 CSS 自定义调整位置 可以通过覆盖默认样式并重新定位关闭按钮的方式将其移动到弹窗外。例如，可以设置绝对定位并将按钮放置在目标位置。 ```html <template> <el-drawer title="我是标题" :visible.sync="drawerVisible"> <!-- 抽屉内容 --> <div class="custom-close-btn">X</div> <!-- 自定义关闭按钮 --> </el-drawer> </template> <script> export default { data() { return { drawerVisible: false, }; }, }; </script> <style scoped> .custom-close-btn { position: absolute; top: -20px; /* 调整为负值以移到外部 */ right: 20px; /* 设置距离右侧的距离 */ cursor: pointer; font-size: 18px; } </style> ``` 上述代码中创建了一个新的 `.custom-close-btn` 类用于表示外部的关闭按钮，并通过 `position: absolute` 将它固定在抽屉上方[^1]。 #### 方法二：监听点击事件手动控制显示隐藏 由于 Element UI 默认不支持直接配置关闭按钮位置，因此还需要绑定点击事件以便于触发抽屉的关闭逻辑。 ```javascript methods: { closeDrawer() { this.drawerVisible = false; } } ``` 接着，在模板部分添加如下代码片段： ```html <div @click="closeDrawer" class="custom-close-btn">X</div> ``` 这样即可完成对外部关闭按钮的功能绑定[^2]。 #### 注意事项 - 需要确保新加入的 DOM 结构不会被框架自动渲染机制所影响。 - 如果项目中有全局样式的冲突需要注意排查解决。 ```css /* 示例：防止其他样式干扰 */ body, html { margin: 0; padding: 0; } .el-drawer__header .el-button--text { display: none !important; /* 可选操作，隐藏原生关闭图标 */ } ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值