自定义抽屉组件

---

源代码代码

	<template>
  <div class="">
    <div class="setbox" :class="isshow ? showClass : ''" :style="drawerStyle">
      <div class="content">
        <div class="close" :class="type=='left'?'left':'right'" @click="close">
          <i v-if="type=='left'" :class="isshow?'el-icon-d-arrow-left':'el-icon-d-arrow-right'"></i>
          <i v-else :class="isshow?'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
        </div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "demo",
  props: {
    isshow: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "left",
    },
    width: {
      type: Number,
      default: 275,
    },
  },
  computed: {
    drawerStyle() {
      return this.type == "left"
        ? {
            width: `${this.width}px`,
            left: `-${this.width-56}px`,
          }
        : {
            width: `${this.width}px`,
            right: `-${this.width}px`,
          };
    },
    showClass() {
      return this.type == "left" ? "show-left" : "show-right";
    },
  },
  data() {
    return {
      //   isshow: false,
    };
  },
  methods: {
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style lang="scss" scoped>
.setbox {
  position: fixed;
  z-index: 99;
  top: 90px;
  bottom: 0px;
  width: 275px;
  height: 100%;
  background: #25262a;
  border: 2px solid #010112;
  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.12);
  border-top: none;
  border-bottom: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; //过渡属性
  //   left: -275px;
  .content {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .close {
    position: absolute;
    top: 0;
    width: 28px;
    height: 30px;
    background: #25262a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid #010112;
    &.left {
      right: -30px;
      border-radius: 0px 6px 6px 0px;
    }
    &.right {
      border-radius: 6px 0px 0px 6px;
      left: -30px;
    }
    i {
      color: #9a9a9a;
    }
  }
}
.show-left {
  left: 55px !important;
}
.show-right {
  right: 0 !important;
}
</style>

使用

    <drawer :isshow="isshow1" @close="close1" type="right">
      <span style="color: #fff">123123</span>
    </drawer>