element-ui抽屉组件打开自动聚焦问题

最新推荐文章于 2024-07-05 09:59:16 发布

V_AYA_V

最新推荐文章于 2024-07-05 09:59:16 发布

阅读量2.3k

点赞数 2

分类专栏： css vue 文章标签： vue css elementui

本文链接：https://blog.csdn.net/V_AYA_V/article/details/114890091

版权

vue 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

在使用element-ui组件过程中遇到了几个非常奇怪的问题。经过一番探索解决了问题，在这里总结一下，希望正在踩坑的朋友们能看到。

打开el-drawer组件，点击右侧会聚焦整个弹框，并显示很丑的聚焦框，具体效果见下图

解决办法：

// less样式修改
/deep/ .el-drawer__container:focus {
  outline: none; 
}
/deep/ .el-drawer:focus {
  outline: none; 
}

组件设置了withHeader为false的情况下，会自动聚焦里面的可聚焦的第一个组件，例如dataPicker的弹框或者input框，select框等

解决办法：

// html修改
<el-drawer
  :visible.sync="drawerShow"
  :with-header="true"
  :wrapperClosable="true"
></el-drawer>
// 样式修改
/deep/ .el-drawer{
  .el-drawer__header{
    height: 0;
    padding: 0;
    margin: 0;
    overflow: hidden; 
  }
}

第二个问题找了好久，发现是自动聚焦的问题，想探索的朋友不妨添加一个title将with-header设置为true可以看到打开抽屉，自动聚焦到了头部的title，我想这也就是为什么设置了with-header为false会聚焦到时间选择的原因，通过设置样式仅仅是使聚焦的状态看不到，但是聚焦仍然存在，好在不影响体验。