解决element-ui(vue-element-admin)组件el-drawer弹出自动聚焦的bug

最新推荐文章于 2024-07-20 16:08:33 发布
最新推荐文章于 2024-07-20 16:08:33 发布
阅读量4k 收藏 4
点赞数 6
分类专栏： VUE 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/n460986590/article/details/112776797
版权

在使用el-drawer组件时,会出现自动聚焦第一个组件的bug
在这里插入图片描述

可以使用如下方法解决:
在drawer中设置一个div,设置ref和tabindex属性用于定位, 为drawer设置opened事件
在这里插入图片描述
在事件中手动聚焦在div中(注意: 此处的_this为在create中手动定义的this)
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

不锈钢大铁锤
关注
专栏目录
Vue - ElementUI 模态框Dialog、Drawer抽屉框，将append-to-body设置为true后，使用deep覆盖样式失效解决办法（将弹框插入到body中样式覆盖失败）
王佳斌
03-20 2944
vue2，element-ui，el-drawer，el-dialog，抽屉弹框，对话框模态框，append-to-body，插入到body中无法使用deep覆盖样式，在element ui组件库中，使用el-drawer抽屉弹框组件，当设置append-to-body属性后，无法使用deep进行样式覆盖怎么办，关于vue+element中el-dialog设置append-to-body样式不生效问题，vue2 elementUI el-dialog修改了body样式不生效问题解决方案，element组件
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
elememnt-UI Drawer 抽屉 点击关闭或聚焦出现边框
steve_sjf的博客
01-06 1160
element ui 的el-drawer 点击聚焦出现边框 添加以下即可重置： .el-drawer:focus ,.el-drawer__container:focus{ outline: none; }
基于element ui的el-drawer进行组件封装
最新发布
辞忧*的博客
07-20 428
【代码】基于element ui的el-drawer进行组件封装。
el-drawer打开自动聚焦问题解决
Boom934的博客
12-22 452
在开发中遇到el-darwer打开会自动聚焦，导致页面其他地方的输入框无法聚焦的问题，网上的方法都没有实际解决，所以只能想其他方法，通过控制台看到有带focus的类名，最后通过让el-drawer__sr-focus失去焦点本质上解决了问题。希望能帮到有同样问题的同学。该问题是element-plus遇到的，如果是element可能有所不同。
el-drawer打开自动获取焦点问题
yanby921005的博客
07-05 370
如果设置了withHeader为false，打开之后默认会获取焦点，设置为true即可。
【纯转载】解决element-ui(vue-element-admin)组件el-drawer弹出自动聚焦的bug
weixin_43914278的博客
11-02 559
https://blog.csdn.net/n460986590/article/details/112776797
element-ui中el-drawer组件打开自动聚焦问题
qq_42753983的博客
05-12 440
el-drawer组件设置了withHeader为false的情况下，会自动聚焦里面的可聚焦的第一个组件，例如dataPicker的弹框或者input框，select框。
template-vue-admin:vue2 + vuex + element-ui管理后台模板
03-21
template-vue-admin 说明 eslint airbnb验证 stylelint标准验证 部分功能需要调整支持，可以直接查看原始里的使用方式（如快照上传，图片裁剪等） babel-eslint如果升级到9以上（包含9），会导致i18n里的语言懒加载...
elsa:elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，用于快速开发后台管理页面
05-09
:high_voltage: elsa（eleme simple admin）基于 element-ui 封装 el-form，el-table 等组件，适用于快速开发后台管理项目。 用法示例，见： Quickstart npm i elsa-vue -S // vue main.js import Vue from 'vue' ...
vue+element-ui demo
09-29
这是一个vue+element-ui的demo 里面有菜单menu组件，是我做的一个后台管理的模板，用到了route路由转向，以及子父组件方法的调用传参等等，如果是想用vue搭建后台的，可以直接...cd vue-admin-master-demo npm run dev
tree-transfer：一个基于vue和element-ui的树形穿梭框及邮件通讯录。一种基于Vue和element-ui的树形穿梭箱组件。 Vuecli3版本见https：github.comhql7wl-tree-transfer示例见->
02-06
el-tree-fransfer是一个基于VUE和element-ui的树形穿梭框组件，使用前请确认已经发布 ！此组件功能组件element-ui的组件，但是里面的数据是树形结构！，， el-tree-transfer依赖的element-ui组件分别是， ，和最主要...
element-ui关于el-drawer抽屉的一点小bug总结
Ｓｈａｄｏｗ的专栏
10-10 1953
这可不行,页面抖动这不能交付啊.查找原因,搜遍了网络没找到一点点有用的东西,全是那几条原创来回被传.头疼. 后来忘了哪里得来的灵感,说是这个抽屉出来的时候改变了高度什么的,导致页面左移了一个滚动条的宽度,只需要将页面最大高度设置成。没什么结果,算了,自己找找原因吧. 上面提到完全引入和按需引入的情况,想着是不是样式出了问题,结果经过控制台查看vue的插件,发现了很多官方文档没有提及的属性.而且有很多是官方文档给出的,挨个试试,不了发现了惊喜!不行,这东西需要搞样式了.方式四:(方式三+方式四 =完美版)
莫名其妙的bug之el-drawer只能打开一次
sinat_38628334的博客
07-25 1024
从官网复制的代码，将<el-deawer>里面的内容替换成自己之前写的标签，结果发现drawer只能个打开一次，控制台报如下错： 网上百度后说是绑定的方法未在methods里定义，然后就开始看drawer相关的打开和关闭方法，确定确实没问题后开始头秃，将drawer里面的元素一层层禁掉、打开后发现居然是drawer里面某个元素上我绑定了click方法，但是这个方法没在methods里面定义......... 发现错误原因后当场就气笑了，这个错真的是让人莫名其妙啊，也不知道会不会有人跟我遇
el-drawer打开后标题处会有聚焦边框
gdjychbsh的博客
04-20 419
解决办法 <style scoped> /deep/ :focus{outline:0;} </style>
vue+elementUI el-drawer实现在父组件区域内打开抽屉组件
疑问 搜索 动手 解决 记录
04-20 3349
父组件最外层样式 { position: relative; overflow: hidden; } drawer组件样式 <el-drawer style="position: absolute" z-index="-1" > // do some </el-drawer>
Eelement ui Drawer抽屉插入vue-element-admin子组件页面
甫岩的博客
01-05 1484
<!-- 抽屉 --> <el-drawer :title="drawerTitle" :visible.sync="drawer" :direction="direction" :before-close="closeDrawer" :size="drawerSize" :modal="false" :wrapperClosable="false" > <...
element-ui抽屉组件打开自动聚焦问题
V_AYA_V的博客
03-16 2351
在是用element-ui组件中遇到了几个非常奇怪的问题。经过一番捣鼓终于解决了，在这里总结一下，希望正在踩坑的朋友们能看到。 打开el-drawer组件，点击右侧会聚焦整个弹框，并显示很丑的聚焦框，具体效果见下图 解决办法： // less样式修改 /deep/ .el-drawer__container:focus { outline: none; } /deep/ .el-drawer:focus { outline: none; } 组件设置了withHeader为fals.
解决Vue中Element-UI组件使用常见问题
- 使用`vue-cli`创建的项目通常已经包含了对Element-UI的支持，但仍然需要注意项目的配置和依赖版本。 在使用Element-UI时，理解其组件的属性和方法是解决问题的关键。遇到问题时，查阅文档、调试代码以及参考社区...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

不锈钢大铁锤

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

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

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

打赏作者

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

抵扣说明：

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

余额充值