我的需求:
抽屉控件的遮罩层,我觉得他黑漆漆的不好看,想换个颜色,可是没找到方法,又不想要遮罩层!
于是乎,关闭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>
效果如图: