el-drawer头部添加元素

要在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 ]