监听resize事件

export function addEventListen(
  target: Window | HTMLElement, event: string, handler: EventListenerOrEventListenerObject, capture = false
) {
    
  if (
    target.addEventListener &&
    typeof target.addEventListener === 'function'
  ) {
    
    target.addEventListener(event, handler, capture);
  }
}

export function removeEventListen(
  target: Window | HTMLElement, event: string, handler: EventListenerOrEventListenerObject, capture = false
) {
    
  if (
    target.removeEventListener &&
    typeof target.removeEventListener === 'function'
  ) {
    
    target.removeEventListener(event, handler, capture);
  }
}

监听主要class

import {
     addEventListen, removeEventListen } from "@/utils/event";

class changeTabelSize {
    
    constructor(arg) {
    
        console.log(arg, 'see111')
        this.time = null;
        this.timeNum = arg.time || 320;
        this.tabelWidth = arg?.tabelWidth || '300px';
        this.otherWidthClass = arg?.otherWidthClass || null;
        this.otherHeightClass = arg?.otherHeightClass || null;
        this.value = arg?.value || null;
        this.minWidth = arg?.minWidth || 0;
        this.fn = arg?.fn || null;
        this.init()
    }
    listener(tag) {
    
        let methods = addEventListen;
        if (tag === false) methods = removeEventListen;
        // window[methods](
        // "resize",
        // this.init.bind(this),
        // false
        // );
        methods(window, "resize", this.init.bind(this))
    }
    // getPad
    init() {
    
        clearTimeout(this.time);
        this.time = setTimeout(() => {
    
            //判断除去menu的宽度
            let pinWidth = document.body.clientWidth; //屏幕可见宽度
            let menuWidth = document.getElementsByClassName("layout-sider")?.[0]?.clientWidth;
            //获取其他影响宽度的dom
            let otherClassWidth = 0;
            for (let k in this.otherWidthClass) {
    
                let other = this.otherWidthClass[k];
                if (typeof this.otherWidthClass[k] == 'string')
                    other = document.getElementsByClassName(this.otherWidthClass[k])?.[0]?.clientWidth;
                otherClassWidth += other;
            }

            let lastWidth = pinWidth - menuWidth - otherClassWidth;
            lastWidth = lastWidth < this.minWidth ? this.minWidth : lastWidth;
            // 判断高度
            let pinHeight = document.body.clientHeight; //屏幕可见高
            //活动高度
            let heardHeight = document.getElementsByClassName("layout-navbar")?.[0]?.clientHeight;
            //获取其他影响高度的dom
            let otherClassHeight = 0;
            for (let k in this.otherHeightClass) {
    
                let other = this.otherHeightClass[k];
                if (typeof this.otherHeightClass[k] == 'string')
                    other = document.getElementsByClassName(this.otherHeightClass[k])?.[0]?.clientHeight;
                // console.log(this.otherHeightClass[k], other) 
                otherClassHeight += +other;
            }
            // console.log(otherClassHeight)
            let pageSize = document.getElementsByClassName('arco-pagination')?.[0]?.clientHeight || 0;
            let lastHeight = pinHeight - heardHeight - otherClassHeight;
            this.value.value = {
    
                width: lastWidth,
                height: lastHeight,
                tabelHeight: lastHeight - (pageSize + 80)
            }
            if (this.fn) {
    
                this.fn(this.value.value)
            }
        }, this.timeNum);
    }
}
export default changeTabelSize

使用

无需再次通过watch监听，利用对象的引用特性，进行引用值的更改
也可以自己添加回调函数进行监听并使用

import changeTabelSize from "@/utils/asset/changeTabelSize";
const tabelSize = reactive({
    
  value: {
    },
});
const tabelVO = ref(null);
onMounted((res) => {
    
  tabelVO.value = new changeTabelSize({
    
    value: tabelSize,
    otherWidthClass: ["left_box", 30],
    otherHeightClass: ["title", "searchFrom", "searchTabs", 160],
    minWidth: 600,
    fn: (res) => {
    
      // console.log(res.height);
      tableData.option.height = res.height + "px";
    },
  });
  tabelVO.value.listener();
});
onBeforeUnmount(() => {
    
  tabelVO.value.listener(false);
});