elemetUI el-drawer头部样式问题,header样式被黑线框住

项目场景:

提示: 使用elementUI 的 el-drawer时相信很多人都会遇到这个问题

右侧弹窗头部 header 有一条黑线框

在这里插入图片描述

解决方案:

重写覆盖el-drawer__header的样式。outline: nonej就可以了

// An highlighted block
.right-pop-box {
    /deep/ .el-drawer__header { 
      span {
        outline: none;
      }
    }
  }

链接: elementUI的el-tree的赋值回显问题.

  • 6
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在el-drawer头部添加元素,你可以使用以下方法。首先,给需要滚动的元素添加以下属性:overflow-x: hidden; overflow-y: auto; height: calc(100vh - 120px); 这样可以隐藏x轴滚动条,并设置高度使得元素在头部和底部之间滚动。 然后,在使用el-drawer时,你可以审查元素并发现关闭后,弹窗只是display:none,但仍然存在于DOM结构中。因此,在弹窗中的组件不会触发生命周期钩子。为了解决这个问题,你可以使用两种方法。第一种是设置destroy-on-close="true",这样在关闭时会销毁弹窗组件,避免触发生命周期钩子。另外,你还可以设置append-to-body="true",close-on-press-escape="false",visible.sync="drawer",direction="direction",custom-class="myclass"和before-close="handleClose"来进行更多的设置。第二种方法是使用v-if="drawer"来控制弹窗的显示与隐藏,同时也可以设置append-to-body="true",close-on-press-escape="false",visible.sync="drawer",direction="direction",custom-class="myclass"和before-close="handleClose"。 另外,如果你想要调整抽屉打开时添加到头部的额外高度,可以使用heightPadding变量来进行设置。你可以在组件页面中设置这个变量,并根据需要进行调整。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [el-drawer满屏时,内容超出不会滚动](https://blog.csdn.net/weixin_45286211/article/details/123892951)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [elementui el-drawer使用的技巧记录](https://blog.csdn.net/qq_27702739/article/details/121622586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [bottom-drawer:一个固定的底部抽屉 Polymer JS 组件,类似于 Discourse 的回复 composer](https://download.csdn.net/download/weixin_42129113/19853201)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值