element-ui drawer 关闭遮罩层
时间: 2023-07-05 13:28:15 浏览: 736
要关闭 Element UI 的 Drawer 组件的遮罩层，可以在 Drawer 组件上添加 `:modal="false"` 属性，即可去掉遮罩层。例如：
```html
<el-drawer title="Drawer" :visible="visible" :modal="false">
<!-- Drawer 内容 -->
</el-drawer>
```
这样设置后，Drawer 组件就不会有遮罩层了。
相关问题
el-drawer遮罩层
### element UI `el-drawer` 组件遮罩层自定义样式与操作
#### 修改默认行为防止点击遮罩关闭弹窗
为了阻止用户通过点击遮罩层来关闭 `el-drawer` 或者 `el-dialog`，可以在组件属性中设置 `close-on-click-modal=false`。这会禁用点击模态背景时自动关闭的行为[^1]。
```html
<el-drawer
title="我是标题"
:visible.sync="drawerVisible"
direction="rtl"
:before-close="handleClose"
close-on-click-modal="false">
</el-drawer>
```
#### 解决遮罩层覆盖问题
对于 `el-drawer` 被遮罩层覆盖显示异常的情况，可以通过调整组件的附加位置参数来修正这个问题。具体来说，在 `<el-drawer>` 标签内加入两个布尔型属性：
- `:append-to-body="true"`：使抽屉容器追加到body元素上；
- `:modal-append-to-body="false"`：让遮罩层不附着于body而是作为抽屉的一部分；
这样做可以有效避免因层级关系造成的视觉错误[^3]。
```html
<el-drawer
title="我是标题"
:visible.sync="showDrawer"
direction="ltr"
:append-to-body="true"
:modal-append-to-body="false">
<span>我来啦!</span>
</el-drawer>
```
#### 自定义遮罩层样式
如果想要进一步定制遮罩层的表现形式，则可通过CSS类选择器的方式修改其外观特性。Element Plus 提供了一个名为 `.el-overlay` 的全局类用于控制所有类型的遮罩效果。因此可以直接针对该类编写特定的选择器来自定义颜色、透明度等属性[^4]。
```css
/* 定义遮罩层的颜色和透明度 */
.el-overlay {
background-color: rgba(0, 0, 0, .5);
}
```
另外还可以利用 scoped CSS 来限定样式的范围仅作用于当前组件内部，从而不影响其他地方使用的相同组件实例。
```vue
<style scoped>
.my-custom-drawer >>> .el-overlay { /* 使用深嵌套符兼容某些预处理器 */
background-color: rgba(255, 0, 0, .7); /* 更改遮罩层为半透明红色 */
}
</style>
<!-- HTML -->
<div class="my-custom-drawer">
<!-- 抽屉内容 -->
</div>
```
el-drawer去除遮罩仍能关闭
### 解决方案
为了禁用 `el-drawer` 组件点击遮罩关闭的功能，可以通过设置属性 `wrapperClosable` 或者 `:wrapper-closable` 为 `false` 来实现这一需求[^4]。以下是具体的代码示例：
```vue
<template>
<div>
<!-- 设置 :wrapper-closable="false" 禁用点击遮罩关闭 -->
<el-drawer
title="我是标题"
:visible.sync="drawerVisible"
:wrapper-closable="false"
size="30%">
<span>我来啦!</span>
</el-drawer>
<!-- 打开抽屉的按钮 -->
<button @click="openDrawer">打开抽屉</button>
</div>
</template>
<script>
export default {
data() {
return {
drawerVisible: false, // 控制抽屉显示状态
};
},
methods: {
openDrawer() {
this.drawerVisible = true;
}
}
};
</script>
```
上述代码通过将 `:wrapper-closable` 属性设为 `false`，成功实现了禁用点击遮罩关闭功能的效果。
另外，在某些场景下可能需要全局配置此行为，则可以在项目初始化阶段对默认值进行修改。例如对于 `Dialog` 和 `Drawer` 的全局设置如下所示[^1]:
```javascript
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.use(ElementUI);
// 全局设置 Dialog 不允许点击遮罩关闭
ElementUI.Dialog.props.closeOnClickModal.default = false;
// 全局设置 Drawer 阻止点击遮罩层关闭
ElementUI.Drawer.props.wrapperClosable.default = false;
```
以上方法适用于希望在整个应用范围内统一控制的行为模式。
#### 注意事项
需要注意的是，当设置了 `close-on-click-modal=false` 后，如果仍需支持手动关闭操作（如右上角的“X”按钮），则应保留该按钮并确保其正常工作[^3]。
---
###
阅读全文
相关推荐
大家在看
ScreenControl_717_M59_20191107_windows_program_
screencontrol program for m59w
KGM转MP3或者FLAC_kgma_kgma格式_FLAC_kgma转换器_kgm转换成flac_亲测完美转换！保证可用。
使用方法：直接将带转换的KGM文件或者KGMA文件放在文件夹里，（可批量放置），将kgm音乐文件复制到"KGM转MP3或者FLAC"文件夹内，运行unlock-kugou-windows-amd64-alpha2.exe，等待转换完成即可。最终会输出未加密的MP3文件或者FLAC文件，使用任何播放器均可直接打开。最终输出的文件会在kgm-vpr-out文件夹中
shopee上架工具.rar
可以大量铺货的,在甩手虾皮上货工具首页中,先配置店铺 抓取商品,输入商品链接到工具,点击抓取 抓取成商品成功之后,可直接上传到虾皮平台
Protege 汉化版
stm32 蓝牙程序
stm32 开发板运行，通过手机蓝牙进行收发数据，需要的下载。
最新推荐
中孚密保卫士是由中孚信息股份有限公司开发的一款信息安全产品，主要用于终端计算机的保密管理和数据防泄漏 它主要面向政府机关、军工单位、科研院所等对信息安全有较高要求的涉密单位，帮助其实现对涉密信息的全
终端保密管理：对计算机终端的操作行为进行监控和审计，防止违规外联、非法拷贝、打印、截屏等行为。
数据防泄漏（DLP）：通过内容识别、加密、权限控制等手段，防止敏感或涉密数据通过U盘、网络、邮件等途径泄露。
文件加密与权限控制：对涉密文件进行透明加密，确保文件在授权范围内使用，防止未授权人员查看或传播。
行为审计与日志记录：详细记录用户的操作行为（如文件访问、外发、打印等），便于事后追溯和审计。
违规外联监控：防止涉密计算机违规连接互联网或其他非授权网络，保障网络边界安全。
移动存储介质管理：对U盘、移动硬盘等设备进行授权管理，区分普通盘和专用盘，防止非法数据拷贝。
Python批量发送短信验证码的实现方法.doc
Python批量发送短信验证码的实现方法.doc
信号处理领域中经验模态分解(EMD)对复杂信号进行IMF分量提取与应用
内容概要：本文介绍了经验模态分解（EMD）这一强大的信号处理技术，详细解释了EMD如何将复杂信号分解为多个内在模态函数（IMF）分量，从而揭示信号的局部特征。文中不仅提供了理论背景介绍，还给出了具体的Python代码实例，展示了EMD在去除心电图基线漂移和分析多层信号方面的实际应用场景。同时指出了EMD存在的局限性和优化方法，如边界效应和模态混叠问题及其解决方案。
适合人群：从事信号处理相关工作的研究人员和技术人员，尤其是对非平稳信号处理感兴趣的从业者。
使用场景及目标：适用于需要从复杂信号中提取有用信息的各种场合，如金融数据分析、生物医学工程等领域。目标是帮助读者掌握EMD的基本原理和具体应用，提高处理非平稳信号的能力。
阅读建议：建议读者结合提供的代码片段动手实践，深入理解EMD的工作机制以及如何针对不同类型的数据选择合适的参数设置。
神经网络基础知识的入门教学指南
资源下载链接为：
https://pan.quark.cn/s/4a0cf578c0a4
神经网络基础知识的入门教学指南（最新、最全版本！打开链接下载即可用！）
C++ 编程语言实现的神经网络库
资源下载链接为：
https://pan.quark.cn/s/5ded706c7f1c
C++ 编程语言实现的神经网络库（最新、最全版本！打开链接下载即可用！）
快速浏览Hacker News热门故事的浏览器扩展
Hacker News Browser-crx插件是一款专为浏览器设计的扩展程序，它允许用户从任何网页上浏览Hacker News上的热门故事，该网站是科技界尤其是编程和创业圈子中非常受欢迎的信息交流平台。Hacker News上的内容主要包括编程、科技创业、互联网趣闻以及相关的讨论。它由Y Combinator（一家知名的硅谷创业孵化器）所维护。
### 关键知识点解析：
1. **扩展程序（Extension）**：
- 扩展程序是一种软件，旨在为浏览器提供额外功能和定制选项。它们可以增强用户的浏览体验，提高效率和安全性。扩展程序通常开发于HTML、CSS和JavaScript技术栈，可以针对不同的浏览器开发，如Chrome、Firefox、Safari等。
2. **Hacker News简介**：
- Hacker News（也称为Hacker News或者HN）是一个新闻社交网站，由Paul Graham和Trevor Blackwell等人于2007年发起，隶属于Y Combinator。它提供了一个平台，让用户分享、讨论技术新闻和创业公司的相关文章。Hacker News社区以其高质量的讨论和新闻而闻名，吸引了大量程序员、企业家和科技爱好者。
3. **Hacker News Browser-crx插件功能**：
- **浏览过去24小时的热门故事**：插件允许用户查看Hacker News中最近24小时内的热门内容。这为用户提供了快速获取当前科技界热门话题的途径。
- **保存故事到Pocket**：Pocket是一个服务，允许用户保存文章、视频和网页以便离线阅读。Hacker News Browser-crx插件可以与用户的Pocket账户集成，方便用户保存他们感兴趣的内容到自己的Pocket列表中。
- **直接从扩展发推文**：社交媒体是现代信息传播的一个重要渠道。通过这个功能，用户可以将他们在Hacker News上的发现直接通过Twitter分享给他们的关注者。
- **搜索特定主题**：用户可以使用这个功能来搜索Hacker News上的特定主题或关键词，从而快速定位他们感兴趣的内容。
4. **如何使用Hacker News Browser-crx插件**：
- 安装扩展：用户需要从浏览器的扩展商店下载并安装Hacker News Browser-crx插件。由于给定信息中提供的文件名为Hacker_News_Browser.crx，这表明这可能是一个Chrome扩展。
- 启用扩展：安装完成后，用户需要在浏览器的扩展管理界面启用该插件。
- 进行配置（可选）：根据需要，用户可能需要对插件进行一些基本配置，比如设置Pocket账户等。
- 使用功能：安装并配置完成后，用户可以开始使用扩展提供的各项功能，包括浏览热门故事、保存内容到Pocket、发推文和搜索特定主题。
### 总结：
Hacker News Browser-crx插件作为一个扩展程序，为用户提供了便捷的途径去浏览和参与Hacker News上的讨论。该插件整合了多种功能，让读者能够实时关注科技动态，并与他人分享讨论。对于科技爱好者以及相关行业的专业人士，这是一个极具价值的工具，它能够帮助他们保持信息的及时更新和知识的持续吸收。
【MATLAB通信建模秘籍】：5个技巧让你为通信系统打下坚实基础
# 1. MATLAB通信建模基础概览
MATLAB（矩阵实验室）作为一种强大的科学计算软件，在通信系统建模和仿真领域扮演着重要角色。对于初学者而言，了解MATLAB的基础操作和通信建模的基本概念是开启深入学习之旅的第一步。
## 1.1 MATLAB简介及其在通信领域的应用
MATLAB是一个高性能的数值计算和可视化软件，广泛应用于工程计算、算法开发、数据分析等领域。在通
汽车车载通讯技术
<think>我们正在讨论汽车车载通讯技术。根据之前的引用，我们知道汽车通信网络分为车内（有线）和车外（无线）两部分。同时，车载SOA架构使用多种通信技术（如CAN总线、以太网、MQTT等）来实现模块化和可扩展的通信。
用户的问题：汽车车载通讯技术原理及应用
回答结构：
1. 概述：简要介绍汽车车载通讯技术的定义和分类。
2. 原理部分：分别介绍车内网络和车外网络的主要技术原理。
2.1 车内网络：重点介绍CAN总线、LIN总线、FlexRay、MOST、Automotive Ethernet等。
2.2 车外网络：介绍V2X（包括V2V、V2I、V2P、V2N）及相
Dev Context Menu Utils (beta)-快速开发浏览器扩展
Dev Context Menu Utils (beta)-crx插件是一款面向开发者群体的浏览器扩展程序，其beta版本的命名暗示了它目前还在开发的早期阶段，可能尚未完全稳定或者未包含全部功能。从标题来看，这款扩展程序旨在为开发者提供便捷的上下文菜单功能。
上下文菜单（Context Menu）通常指的是当用户在软件或网页上右键点击时弹出的菜单。上下文菜单的内容根据点击的位置和对象会有所不同，它可以为用户提供快捷、针对当前情境的操作选项。在浏览器中，上下文菜单经常被用于快速访问开发者工具、页面操作、或是网页内容处理等功能。
标题中提到的“CNPJ”和“CPF”是巴西的法人和自然人的税务识别代码。CNPJ（Cadastro Nacional de Pessoas Jurídicas）是巴西所有公司和企业的全国性注册代码，而CPF（Cadastro de Pessoas Físicas）是巴西公民的个人税务识别码。在Dev Context Menu Utils (beta)中加入这两个菜单项，可能意味着插件能够让开发者在遇到需要验证或输入这些税务识别码的场景时，通过浏览器的右键菜单快速生成示例代码或进行其他相关操作。
“Lorem Ipsum”是设计和排版行业常用的一种占位文本，它起源于拉丁文学，经常用于设计软件的文本预览，以便设计师在不影响最终版式的情况下测试页面布局。在这款插件的上下文菜单中加入这一项，可能允许用户快速生成一段Lorem Ipsum文本，用于测试网页布局或者排版效果，从而让开发者在设计过程中获得更真实的视觉体验。
“电话”菜单项则可能用于提供快速生成或者验证电话号码格式的功能，这对于处理与电话相关的用户输入或数据录入工作非常有用。考虑到不同国家和地区的电话号码格式可能有所不同，这一功能可能允许用户选择特定的地区代码，从而生成相应格式的电话号码样例。
【标签】中提到的“扩展程序”一词，是指能够被浏览器安装并添加额外功能的软件。扩展程序可以改变浏览器的基本界面、行为和功能，是Web开发和测试中常见的工具。它们通常由浏览器的开发者或者第三方开发者创建，对于提升开发效率、调试和测试网站有着重要的作用。
【压缩包子文件的文件名称列表】中的“Dev_Context_Menu_Utils_(beta).crx”是这款插件的文件名，CRX是Chrome扩展程序的文件格式，类似于Windows平台上的.exe可执行文件格式，只不过CRX是为Chrome浏览器特别设计的。扩展程序开发者需要通过Chrome Web Store或者其他途径将CRX文件分发给用户，用户可以通过下载并安装CRX文件来使用扩展程序。
总体来说，Dev Context Menu Utils (beta) 插件通过为开发者提供便捷的上下文菜单项来增强开发效率，允许快速生成重要的代码片段和数据格式，从而简化开发过程中的常见任务。对于那些在开发阶段需要频繁使用这些功能的开发者来说，这款插件将是一个非常有价值的工具。然而，由于它目前还是beta版本，使用时可能需要注意可能存在的一些错误或功能限制，并建议开发者在实际项目中使用前先在测试环境中进行充分的测试。
【Coz进阶秘籍】：解锁工作流高级功能，提升效率的终极技巧
# 1. Coz工作流基础概述
工作流系统是现代IT运营不可或缺的一部分，它通过自动化执行任务和协调业务流程来提高效率。在本章节中，我们将首先介绍Coz工作流的基础概念和其在业务流程自动化中的应用。Coz工作流利用一系列预定义的任务、规则以及任务之间的依赖关系，按照既定规