Container.vue 1.4 KB
Newer Older
L
LeoKu 已提交
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69
<template>
  <section class="container" :class="{ full: isCollapsed }">
    <slot />
  </section>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted } from 'vue'

import { useSider } from '@/hooks'
import { SCREEN } from '@/utils/constant'

const { isCollapsed, openSider, closeSider } = useSider()

function handleWindowResize() {
  if (window.innerWidth <= SCREEN.lg) {
    closeSider()
  } else {
    openSider()
  }
}

onMounted(() => {
  void (function () {
    const throttle = function (
      type: string,
      customEventName: string,
      obj: Window
    ) {
      obj = obj || window
      let running = false
      const func = () => {
        if (running) {
          return
        }
        running = true
        requestAnimationFrame(() => {
          obj.dispatchEvent(new CustomEvent(customEventName))
          running = false
        })
      }
      obj.addEventListener(type, func)
    }
    throttle('resize', 'optimizedResize', window)
  })()

  window.addEventListener('optimizedResize', handleWindowResize)
})

onUnmounted(() => {
  window.removeEventListener('optimizedResize', handleWindowResize)
})
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding-right: $layout-sider-width;
  transition: padding-right 0.2s;

  &.full {
    padding-right: 0;
  }

  @media screen and (max-width: $screen-lg) {
    padding-right: 0;
  }
}
</style>