首页 > 其他分享 >【前端】去掉el-drawer遮罩层,不影响其他位置点击的方法,亲测可用

【前端】去掉el-drawer遮罩层,不影响其他位置点击的方法,亲测可用

时间:2024-01-13 13:37:03浏览次数:47  
标签:遮罩 控件 drawer important el 抽屉


我的需求:
抽屉控件的遮罩层,我觉得他黑漆漆的不好看,想换个颜色,可是没找到方法,又不想要遮罩层!
于是乎,关闭modal(本质上,只是遮罩层颜色透明了,还是会影响页面交互)
于是乎,我更改遮罩层宽度,做了一系列调整,使得遮罩层不会影响其他地方的点击!

Element plus 的抽屉控件

    <el-drawer     
        v-model="drawer" 
        title="I am the title" 
        :with-header="false" 
        :before-close="closeDrawer" 
        :size=percentage    
        
        :wrapperClosable="false"
        :modal="false"    
        modal-class="AIdrawer"
        class="AIdrawerWrapper"    
        :direction="rtl" 

    >
 
注:CSS样式,千万不要加scoped,否则不起作用!!!

<!-- <style scoped> -->
 
 <style>

 
/* 抽屉从右向左 */
.AIdrawerWrapper{   
  margin-left: auto;  
 
}

/* mask蒙版的宽度 */
.AIdrawer{
  width: 0px;
}

/* 用important做样式穿透 */
.el-drawer {
    position: relative;    
    left: 100VW; 
    margin-top: 87px;    
    width: 19vw !important;
    height: 92% !important;
    
}  

</style>

效果如图:

【前端】去掉el-drawer遮罩层,不影响其他位置点击的方法,亲测可用_控件


标签:遮罩,控件,drawer,important,el,抽屉
From: https://blog.51cto.com/u_8771474/9231991

相关文章

  • 关闭 Elasticsearch 集群的安全性设置
    关闭Elasticsearch集群的安全性设置,特别是如果您正在使用X-Pack,涉及到修改Elasticsearch的配置。以下是一般步骤,但请注意,这可能会使您的Elasticsearch集群面临安全风险,因此建议仅在开发或测试环境中执行此操作。关闭X-Pack安全性编辑配置文件:打开Elasticsearch的配置......
  • 2024-01-13 antd的tabel组件业务问题之勾选了table中的一项,然后弹出弹窗,接着关闭弹窗,
    如图:问题:table显示的勾选状态的数据无法被改变。原因:你没有改变到勾选数据,你只是在勾选时把选中的值赋值给了一个变量,然后以为自己清空了变量,以为自然而然地就取消勾选状态了,实际上就是你代码没写全!解决方案:原来写法:rowSelection:{onChange:handleChange,},你写......
  • 通过 KernelUtil.dll 劫持 QQ / TIM 客户端 QQClientkey / QQKey 详细教程(附源码)
    前言由于QQ9.7.20版本后已经不能通过模拟网页快捷登录来截取QQClientkey/QQKey,估计是针对访问的程序做了限制,然而经过多方面测试,诸多的地区、环境、机器也针对这种获取方法做了相应的措施,导致模拟网页快捷登录来截取数据被彻底的和谐,为了解决这个问题我们只能更改思路对......
  • MySQL一键安装Shell脚本的实现
    本文主要介绍了MySQL一键安装Shell脚本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧−目录一、脚本说明1、linux系统版本2、MySQL版本3、运行方式二、脚本内容一、脚本说明1、linux系统版本EL6,EL7,EL8,......
  • Modelsim add to schemetic报错及解决
    Overview类似于Modelsim这样的软件,可以综合出RTL的实际逻辑电路,因此对于了解RTL到底层电路的映射是十分方便的。Addtoschemetic最近想用schemetic看一下不等于!=这个运算符会综合出怎样的电路逻辑,因此用Modelsim跑了一个简单的demo,但在将测试代码加入schemetic时报错。 关......
  • Windows 10 中,可以使用 PowerShell 添加打印和文件服务的角色功能组件,包括 Internet
    在Windows10中,可以使用PowerShell添加打印和文件服务的角色功能组件,包括Internet打印客户端、LPD打印服务和LPR端口监视器。以下是添加这些功能组件的PowerShell命令:首先,以管理员身份打开PowerShell终端。在开始菜单中搜索"PowerShell",然后右键点击"WindowsPo......
  • idea 热部署插件 JRebel
    前言:热部署:是在不关闭或重启服务的情况下,更新Java类文件或配置文件,实现修改内容生效;通过热部署,可提高开发效率,节省程序打包重启的时间;同时,可实现生产环境中需要不停机或重启的服务的升级。 随着代码量增加,也需要不断改动,我们需要重新Run或者DeBug。开发效率......
  • Microsoft 365 新功能速递:为Microsoft Entra ID中的设备绑定密钥(更改为FIDO2和Windows
    51CTO博客链接:https://blog.51cto.com/u_13637423从2024年2月中旬开始,除了现有的FIDO2安全密钥支持外,MicrosoftEntraID还将支持存储在计算机和移动设备上的设备绑定密钥,作为预览中的身份验证方法。这使您的用户能够使用现有设备执行防钓鱼身份验证。我们将扩展现有的FIDO2身份验......
  • MT6785(Helio G95)芯片性能参数_MTK联发科4G处理器
    联发科MT6785平台采用台积电12nmFinFET制程工艺,2*A76+6*A55架构,搭载Android12.0/13.0操作系统,主频最高达2.05GHz,搭载HyperEngine游戏技术,通过四个增强领域的整体增强功能。搭载ArmMali-G76MC4GPU运行速度可提升至900MHz。支持H.264、H.265/HEVC格式视频编码,最高支持4K/......
  • 软件测试/测试开发全日制|Pytest中yield的用法详解
    前言在之前的介绍中,我们已经介绍了fixture的简单用法,但其实fixture还提供了两种非常优雅高效的写法,来完成测试执行前的处理操作与执行后的处理操作,即使用yield或addfinalizer来实现。本文我们将介绍使用yield来实现操作。yield在fixture中的关键字yield主要有两个作用:yield代替retu......