记录：el-drawer 抽屉不要遮罩层，且可操作非抽屉部分

koiyQ

已于 2024-12-10 09:47:50 修改

阅读量757

点赞数 4

CC 4.0 BY-SA版权

分类专栏：记录文章标签： elementui

于 2024-12-10 09:37:59 首次发布

本文链接：https://blog.csdn.net/Miss_Y0/article/details/144364355

记录专栏收录该内容

8 篇文章

订阅专栏

1、抽屉应用

    <el-drawer
      title="标题"
      direction="rtl"
      :visible.sync="drawer"
      :modal="false"
      :wrapperClosable="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
      :append-to-body="false"
      :before-close="handleClose"
      class="custom-drawer"
    >
      <span>我是抽屉内容</span>
    </el-drawer>

2、CSS 设置

<style lang="scss">
.custom-drawer {
  left: calc(100vw - 460px - 36px); // 位置设置
  width: 460px;   // 抽屉宽度设置
  padding-left: 36px;   // 阴影视觉宽度
  .el-drawer {
    width: 100% !important;
    .el-drawer__header {
      padding: 16px;
      margin-bottom: 6px;
      border-bottom: 1px solid #dcdfe6;
    }
    .el-drawer__header > :first-child {
      font-size: 18px;
      color: #303133;
      font-weight: 600;
    }
  }
}
</style>