随笔- 24 文章- 0 评论- 1 阅读- 34274

vue 自定义锁功能



//主函数中的锁的使用

import * as tools from "@/utils";
const lockObj = new tools.LockHandler();//构造一把锁
export default defineComponent({
  setup() {
    const search = (params, callback) => {//获取数据
       getDataList(params)
       .then((res) => {
         。。。
         if (callback) callback();//执行回调函数，锁将在回调函数中释放
       })
       .catch((err) => {
         console.error(err);
       });
    };
 
    return {
      search,
    };
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      if (!lockObj.isLock()) {//如果没有上锁
       
        lockObj.lock();//上锁
         
        //注意第2个参数是获取数据后的回调函数
        that.search(null, () => {
          lockObj.unLock();
        });
      }
    };
 
    this.search();
  },
});

//utils中锁的定义

//src/utils/index.js
export class LockHandler {
  #_lock;
  constructor() {
    this.#_lock = false;
  }
 
  isLock = () => {
    return this.#_lock;
  };
  lock = () => {
    this.#_lock = true;
  };
  unLock = () => {
    this.#_lock = false;
  };
}