自定义抽屉组件

<template>
  <!-- 抽屉组件模板 -->
  <div v-show="showDrawer" class="drawer">
    <!-- 抽屉内容过渡 -->
    <transition
      name="drawer-content"
      @before-enter="beforeEnter"
      @after-leave="afterLeave"
      @enter="transitioning"
      @leave="transitioning"
    >
      <div class="drawer-body">
        <!-- 抽屉遮罩，用于关闭抽屉 -->
        <div class="drawer-mask" @click.stop="closeDrawer"></div>
        <!-- 带水平拖拽功能的抽屉内容 -->
        <div v-HorizontalDrag="bindingConfig" class="drawer-content" @click.stop>
          <slot></slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import { Emit, Prop, Watch } from 'vue-property-decorator';

// 用于绑定配置的接口
interface bindingConfig {
  minWidth: string | number;
  maxWidth: string | number;
}

@Component({
  components: {},
})
export default class Drawer extends Vue {
  // 控制抽屉可见性和宽度的 props
  @Prop() showDrawer!: boolean;
  @Prop() width!: number | string;
  @Prop() bindingConfig!: bindingConfig;


  @Emit('closeDrawer')
  closeDrawer() {
    return;
  }

  /* *********************** 抽屉动画方法 开始 *************************** */

  // 进入过渡前调用的方法
  beforeEnter(el) {
    el.style.overflow = 'visible';
  }

  // 离开过渡后调用的方法
  afterLeave(el) {
    el.style.overflow = 'visible';
  }

  // 过渡中调用的方法
  transitioning(el) {
    el.style.overflow = 'hidden';
  }

  /* *********************** 抽屉动画方法 结束 *************************** */
}
</script>

<style lang="scss" scoped>
.drawer {
  position: absolute;
  height: 100%;
  width: 100%;

  .drawer-body {
    width: 100%;
    height: 100%;

    .drawer-mask {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 2;
    }

    .drawer-content {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 3;
      width: 600px; // 默认宽度，可以由 props 覆盖
      height: 100%;
      background-color: #ffffff;
    }
  }

  /* 入场动画 */
  .drawer-content-enter-active {
    transition: transform 0.1s ease;
  }
  .drawer-content-enter {
    transform: translateX(100%);
  }

  /* 出场动画 */
  .drawer-content-leave-active {
    transition: transform 0.3s ease;
  }
  .drawer-content-leave {
    transform: translateX(100%);
  }
}
</style>