大屏自适应容器

1.节流函数

export const debounce = (fn, delay) => {
    let timer = null
    return function (...args) {
        if (timer) clearTimeout(timer)
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, delay)
    }
}

2.新建container文件目录并创建index.vue

引入节流函数

<template>
  <div ref="containerTarget" class="container">
    <template v-if="isReady">
      <slot></slot>
    </template>
  </div>
</template>
<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import {debounce} from "@/utils/common.js"

const props = defineProps({
  options: {
    type: Object,
    default: () => {
    }
  },
})

const isReady = ref(false)
const containerTarget = ref()
// 容器宽高
const containerPort = ref({