el-drawer关闭时刷新当前页面
时间: 2023-10-05 08:14:58 浏览: 135
要实现这个功能,你需要在el-drawer组件的关闭事件中添加一个刷新页面的操作。具体来说,你可以在关闭事件中使用location.reload()方法来刷新当前页面,如下所示:
```html
<el-drawer
:visible.sync="visible"
@close="onClose"
>
<!-- drawer内容 -->
</el-drawer>
```
```javascript
export default {
data() {
return {
visible: false
};
},
methods: {
onClose() {
// 关闭事件中添加刷新页面的操作
location.reload();
}
}
};
```
这样,在el-drawer关闭时,页面就会自动刷新了。
相关问题
el-drawer和el-row
el-drawer是一个Vue组件,用于在页面中实现抽屉式的弹出窗口。它可以通过设置direction属性来指定抽屉弹出的方向,可以是上下左右。el-drawer具有title属性用于设置弹窗的标题,visible.sync属性用于控制弹窗的显示与隐藏,before-close属性可以设置一个回调函数,在弹窗关闭前执行相应的操作。另外,el-drawer还可以通过设置modal-append-to-body和append-to-body属性来控制弹窗是否添加到body元素上。
el-row是Element UI中的网格布局组件,用于实现栅格系统。它可以将页面划分为12等分的栅格,用于灵活地布局页面内容。el-row组件可以包含el-col组件,通过设置el-col的span属性来指定每个栅格所占的份数。
el-drawer z-index
el-drawer组件具有z-index属性,可以用来控制其在页面中的显示层级。如果发现el-drawer遮挡了页面其他模块,可以通过配置z-index属性来解决。
以下是一个示例代码,展示如何使用z-index属性来设置el-drawer的显示层级:
```html
<el-drawer :visible.sync="drawer" style="position: absolute" width="100%" z-index="-1">
<span slot="title">抽屉标题xxx</span>
<div>el-drawer内容...</div>
</el-drawer>
```
在上述代码中,通过将z-index属性设置为-1,可以将el-drawer的显示层级设置为较低的值,使其在页面中处于较低的层级,从而不会遮挡其他模块。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)