tba-waves/src/components/RightFrame.vue

<script lang="ts" setup>
import {computed, ref, useSlots, watch} from 'vue'
import convert from '@/assets/svg/convert.svg'
// const emit = defineEmits(['update:useLeftSidebar'])
const slots = useSlots()

let sidebarWidth = ref(window.innerWidth * 0.22)
let leftSidebarShow = ref(true)
const leftSidebarStyle = computed(() => {
  return {
    transform: leftSidebarShow.value ? 'translateX(0px)' : `translateX(-${sidebarWidth.value}px)`,
    width: `${sidebarWidth.value}px`,
  }
})
let rightSidebarShow = ref(true)
const rightSidebarStyle = computed(() => {
  return {
    transform: rightSidebarShow.value ? 'translateX(0px)' : `translateX(${sidebarWidth.value}px)`,
    width: `${sidebarWidth.value}px`,
  }
})

function convertSidebar(modelName) {
  if (modelName === 'left') {
    debugger
    leftSidebarShow.value = !leftSidebarShow.value
  } else {
    rightSidebarShow.value = !rightSidebarShow.value
  }
}


watch(
  () => slots.leftModule,
  (val): void => {
    if (!val) {
      leftSidebarShow.value = false
    }
  },
)

watch(
  () => slots.rightModule,
  (val): void => {
    if (!val) {
      rightSidebarShow.value = false
    }
  },
)
</script>

<template>
  <div class="right-frame">
    <div v-if="slots.leftModule" :style="leftSidebarStyle" class="gw-sidebar-left">
      <div class="gw-sidebar-container">
        <slot name="leftModule"></slot>
      </div>
      <div class="gw-sidebar-btn left-btn" @click="convertSidebar('left')">
        <icon :data="convert"/>
      </div>
    </div>
    <div :style="rightSidebarStyle" class="gw-sidebar-right">
      <div v-if="slots.rightModule" class="gw-sidebar-container">
        <slot name="rightModule"></slot>
      </div>
      <div v-if="slots.rightModule" class="gw-sidebar-btn right-btn" @click="convertSidebar('right')">
        <icon :data="convert"/>
      </div>
      <div v-if="slots.btnGroup" ref="rightTopBtn" class="right-top-btn">
        <slot name="btnGroup"></slot>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.right-frame {
  position: relative;
  height: 100%;
  padding: 0 0.7rem 0.7rem 0.7rem;

  .right-top-btn {
    pointer-events: auto;
    position: absolute;
    top: 0;
    right: calc(23vw + 2rem);

    display: flex;
    flex-direction: column;
    font-size: 1.2rem;

    button {
      font-size: 1.2rem;
    }

    .transition-box {
      padding: 0.7rem;
      margin-bottom: 0.35rem;
      border-radius: 4px;
      background-color: #409eff;
      text-align: center;
      color: #fff;
      box-sizing: border-box;
    }
  }

  .gw-sidebar-left,
  .gw-sidebar-right {
    pointer-events: auto;
    position: relative;
    transition: 0.3s;
    //     transition: all 1s;
    height: calc(100%);
    min-width: 300px;

    &:hover .gw-sidebar-btn {
      display: flex;
    }

    .gw-sidebar-container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }

    .gw-sidebar-btn {
      top: 10px;
      position: absolute;
      cursor: pointer;
      background-color: #2e6ca6;
      height: 40px;
      width: 40px;
      display: none;
      justify-content: center;
      align-items: center;

      &.left-btn {
        right: -40px;
        border-radius: 0 20px 20px 0;
      }

      &.right-btn {
        left: -40px;
        border-radius: 20px 0 0 20px;
      }

      svg {
        fill: #fff;
        height: 12px;
        width: 12px;
      }
    }
  }

  .gw-sidebar-left {
    float: left;
  }

  .gw-sidebar-right {
    float: right;
  }
}
</style>