el-drawer(总结 vue3)

一 封装el-drawer

mei 

封装el-drawer_el-drawer封装-CSDN博客

二 第一次展开抽一下

第一次打开抽搐一下，并不是平滑的打开，使用属性

    :open-delay="300"

三  去掉遮罩层， 并且可以操作之外的东西

element plus 中 Drawer 抽屉开启后不能点击外部元素问题-CSDN博客

 

  <el-drawer
    v-model="drawer"
    :with-header="false"
    :append-to-body="true"
    :class="isSmall ? 'help-drawer' : 'help-drawer-big'"
    :modal="false"
    :open-delay="300"
    :modal-class="isSmall ? 'small-layer' : 'big-layer'"
    @open="open"
  >

</el-drawer>



.small-layer {
  width: 500px !important;
  position: fixed !important;
  inset: 0px calc(100vw - 500px) !important;
  margin-top: 60px;
}

四 放在导航栏下边，不遮挡导航栏的操作