el-drawer点击遮罩不关闭
时间: 2023-11-07 22:51:59 浏览: 110
您可以通过设置`wrapper-closable`属性为`false`来实现el-drawer点击遮罩不关闭的效果。具体的代码示例如下:
```html
<el-drawer title="我是标题" :visible.sync="drawer" :wrapper-closable="false" :with-header="false">
<span>我来啦!</span>
</el-drawer>
```
在上述代码中,将`wrapper-closable`属性设置为`false`后,点击遮罩层时不会关闭el-drawer组件。
相关问题
判断是不是点击el-drawer的遮罩层
在el-drawer组件中,遮罩层是一个用于阻止用户直接与页面交互的,点击遮罩层应该不会关闭抽屉。要判断是否点击了el-drawer的遮罩层,可以使用以下代码:
```javascript
const drawerContainer = document.querySelector('.el-drawer__container'); // 获取el-drawer容器元素
drawerContainer.addEventListener('click', (event) => {
// 判断是否点击了遮罩层
if (event.target.classList.contains('el-drawer__mask')) {
// 点击了遮罩层,不做处理
return;
}
// 处理其他情况,如点击了抽屉内容区域
});
```
在上述代码中,`event.target`表示点击的目标元素,`classList.contains('el-drawer__mask')`用于判断目标元素是否包含`el-drawer__mask`类名,如果包含,说明点击了遮罩层,返回即可。如果不包含,则说明点击了抽屉内容区域或其他区域,可以在这里处理相应的操作。
el-drawer遮罩层怎么控制
el-drawer 组件的遮罩层可以通过 `mask` 属性来控制。该属性默认为 `true`,表示开启遮罩层。如果想要关闭遮罩层,只需要将该属性设置为 `false` 即可。例如:
```html
<el-drawer :visible="visible" :mask="false">
<!-- Drawer 内容 -->
</el-drawer>
```
在上面的代码中,`visible` 表示 Drawer 的显隐状态,`mask` 被设置为 `false`,表示关闭遮罩层。