js分享，封装hooks去返回一个值从而控制页面中相关列的展示

export default function useResizeSearch() {
    const { proxy } = useCommon()  //代替this变化
    const windowSize = ref(false)  //定义初始值为false
    onMounted(() => {
        window.addEventListener("resize", throttle(handleResize));//监听窗口大小的改变（此处使用了防抖，提升性能）
        let vm = document.getElementsByTagName('section')[0]//获取页面中的section的第一个元素
        let div = vm.getElementsByTagName('div')[0]//获取div的第一个元素
        div.style.height = '100%'
    })
    onBeforeUnmount(() => {
        window.removeEventListener("resize", handleResize);//页面加载完后移除此事件
    })

    const handleResize = () => {
        let clientWidth = document.documentElement.clientWidth;//获取浏览器窗口文档显示区域的宽度，不包括滚动条。
        windowSize.value = clientWidth > 1619;//如果宽度大于1619则返回true，反之返回false
        console.log(isXLCol, '<<---------');
    }
    handleResize()
    //防抖和节流
    let throttle = (fn: any, interval = 500) => {
        let timer: any = null;
        let firstTime = true;

        return function (...args) {
            if (firstTime) {
                // 第一次加载
                fn.apply(proxy, args);
                return (firstTime = false);
            }
            if (timer) {
                // 定时器正在执行中，跳过
                return;
            }
            timer = setTimeout(() => {
                clearTimeout(timer);
                timer = null;
                fn.apply(proxy, args);
            }, interval);
        };
    };
    return {
        windowSize,
    }


}

在页面中通过计算属性从而使用该返回值

import useResizeSearch from '@/hooks/use-resizeSearch'

const colElementNum = computed(() => {
      return isXLCol.value ? 7 : 5 //控制页面中为七列或者五列
 })