【前端】去掉el-drawer遮罩层,不影响其他位置点击的方法,亲测可用
2023-12-28 13:09:47
我的需求:
抽屉控件的遮罩层,我觉得他黑漆漆的不好看,想换个颜色,可是没找到方法,又不想要遮罩层!
于是乎,关闭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>
效果如图:
文章来源:https://blog.csdn.net/sunshinezhihuo/article/details/135264154
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!