ant design vue drawer 在没有打开的时候无法修改内部样式
时间: 2023-12-26 13:07:08 浏览: 37
Ant Design Vue Drawer 是一个可抽屉式的组件,当抽屉关闭时,其内容并不会被渲染到 DOM 中,因此无法直接修改其内部样式。
但是,Ant Design Vue Drawer 提供了 `getContainer` 属性,用于指定抽屉渲染的容器节点,默认为 `body`,你可以通过指定一个容器来实现修改其内部样式的目的。
具体实现步骤如下:
1. 在需要渲染抽屉的页面中,定义一个容器节点,例如:
```html
<div id="drawer-container"></div>
```
2. 在使用 Drawer 组件时,指定 `getContainer` 属性为容器节点:
```html
<a-drawer :get-container="() => document.getElementById('drawer-container')">
<!-- Drawer 内容 -->
</a-drawer>
```
3. 使用 CSS 选择器修改抽屉内部元素的样式:
```css
#drawer-container .ant-drawer-content {
/* 修改抽屉内容的样式 */
}
```
注意:如果你使用的是 Ant Design Vue 1.x 版本,在 `getContainer` 属性中需要传入容器节点的 DOM 对象,而不是返回容器节点的函数。例如:
```html
<a-drawer :get-container="document.getElementById('drawer-container')">
<!-- Drawer 内容 -->
</a-drawer>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)