便利贴--48{再次，适配屏幕宽高class}

监听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 – 2版本 抛出修改方法到store 可以在任意实践中修改尺寸

import { addEventListen, removeEventListen } from "@/utils/event";
// import { saveCacheDataStore } from "@/store";
import { changeTableSizeDataStore } from "@/store";
class changeTabelSize {
    constructor(arg) {
        console.log(arg, 'see111')
        this.time = null;
        this.timeNum = arg.time || 160;
        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.otherAddSize = arg.otherAddSize || 0
        this.change = changeTableSizeDataStore();
        this.init()
    }
    listener(tag) {
        let methods = addEventListen;
        if (tag === false) {
            methods = removeEventListen;
            this.change.clearData(this.init.bind(this));
            console.log(this.change, 'this.change remove');
        } else {
            this.change.setFn(this.init.bind(this));
            console.log(this.change, 'this.change add');
        };
        // window[methods](
        //     "resize",
        //     this.init.bind(this),
        //     false
        // );
        methods(window, "resize", this.init.bind(this));
        // this.change.change()
        // this.change.change()
    }
    // 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 || 0;
                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 || 0;
                // console.log(this.otherHeightClass[k], other) 
                otherClassHeight += +other;
            }
            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 + this.otherAddSize)
            }
            if (this.fn) {
                this.fn(this.value.value)
            }
        }, this.timeNum);
    }
}
export default changeTabelSize

store

changeTableSize  index.ts
import { defineStore } from 'pinia';

import { changeTableSizeDataState } from './types';

const changeTableSizeDataStore = defineStore('changeTableSize', {
  state: (): changeTableSizeDataState => ({
    value: false,
    fn: function (res: any) {
      // console.log(res, '没有可改变的表格') 
    }
  }),

  getters: {
    getSaveInfo(state: changeTableSizeDataState): changeTableSizeDataState {
      // console.log(state, 'seeeeeeeee1')
      // this.clearData()
      // console.log(state, 'seeeeeeeee2')
      return { ...state };
    },
  },

  actions: {
    getData() {
      let value = this.value;
      this.clearData()
      return value
    },
    change(data: any) {
      // console.log(this.fn, 'this.change')
      this.fn();
      return
      let value = { value: data }
      if (data) {
        data();
      }
      this.$patch(value)
    },
    setFn(fn: any) {
      let value = { fn: fn }
      this.$patch(value)
    },
    clearData() {
      this.$reset()
    }
  },
});

export default changeTableSizeDataStore;


changeTableSize  types.ts

export interface changeTableSizeDataState {
  value?: boolean;
  fn: any
}

监听主要class – 1版本 只能通过改变屏幕尺寸来改变size

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);
});