Vue 实现drawer抽屉效果

[PleaseStartYourPerformance]

超级简单---直接上代码

html

      <button @click="handleClick">点我触发drawer</button>
      <transition name="fade">
        <div class="chart-efficiecy-report-drawer-background" v-show="drawerVisible" @click="handlerDrawerClick" />
      </transition>
      <transition name="into">
        <div class="chart-efficiecy-report-drawer-content" v-show="drawerVisible">
          <efficiecy-all-focus/>
        </div>
      </transition>

js

  public drawerVisible = false
  public handleClick(){
    this.drawerVisible = true;
  }
  public handlerDrawerClick(){
    this.drawerVisible = false;
  }

css

<style lang="scss" scoped>
  .chart-efficiecy-report{
    &-drawer-background{
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 1000;
    }
    &-drawer-content{
      position: fixed;
      width: 380px;
      height: 100%;
      top: 0;
      right: 0;
      background: #fff;
      z-index: 1002;
      transition: right .2s;
    }
  }
  .fade-enter-active, .fade-leave-active {
    transition: opacity .4s
  }
  .fade-enter, .fade-leave-active {
    opacity: 0
  }
  .into-enter-active, .into-leave-active {
    right: 0;
  }
  .into-enter, .into-leave-active {
    right: -380px;
  }
</style>

效果：