vue3封装右侧弹出框

啥也不说了，直接上代码 `` 封装一个弹框，在内部接收宽度、高度、标题，

  <div
    class="side-box-container"
    :class="[isShow ? 'side-box-container-show' : '']"
    :style="{ height: height }"
  >
    <div
      class="side-box"
      :class="[isShow ? 'side-box-show' : '']"
      :style="{ width: w }"
    >
      <div :style="{ width: width }">
        <slot />
      </div>
    </div>
    <div
      class="side-box-fixed"
      @click="isShow = !isShow"
    >
      <span>{{ title }}</span>
      <img
        src="@/assets/icons/monitoring/nice-day/side-box-arrow.png"
        alt=""
        class="side-box-arrow"
        :class="[isShow ? 'side-box-arrow-show' : '']"
      >
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '800px'
    },
    height: {
      type: String,
      default: '652px'
    }
  },
  setup (props) {
    const isShow = ref(false)

    const w = computed(() => (isShow.value ? props.width : '0px'))
    return {
      isShow,
      w
    }
  }
})
</script>

<style lang="less" scoped>
@import './SideBox.less';
</style>

通过isShow的状态控制class类名，类名控制样式
.side-box-container {
  position: absolute;
  top: 50%;
  right: 1px;
  transform: translateY(-52.5%);
  background-color: rgba(0, 9, 45, 0);
  padding-right: 104px;
  box-sizing: border-box;
  border-right: 1px solid #044B9E;
  transition: background-color .4s ease ease-in;
  z-index: 997;

  .side-box {
    // height: 100%;
    opacity: 0;
    overflow: hidden;
    transition: width .3s ease-out, opacity .4s ease-out;
  }

  .side-box-show {
    opacity: 1;
    transition: width .4s ease-out, opacity .3s ease-in;
  }

  .side-box-fixed {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 104px;
    font-size: 30px;
    word-break: break-all;
    padding: 8px 12px 60px 35px;
    box-sizing: border-box;
    line-height: 46px;
    background: url('@{STATIC_URL}/images/monitoring/nice-day/side-box-bg.png') center center no-repeat;
    background-size: 100%;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    .side-box-arrow {
      width: 22px;
      height: 22px;
      transform: rotate(0);
      transition: transform .3s ease;
      margin-top: 28px;
      margin-bottom: -50px;
    }

    .side-box-arrow-show {
      transform: rotate(180deg);
    }
  }
}

.side-box-container-show {
  background-color: rgba(0, 9, 45, 0.95);
  border-top: 1px solid #044B9E;
  border-left: 1px solid #044B9E;
  border-bottom: 1px solid #044B9E;
  box-shadow: #0AC7FC 0 0 20px inset;
}

`` 外部调用 import SideBox '@/ 在标签上传入标题和盒子宽度

<SideBox title="点我弹出" width="680px"></SideBox>