vue.mixin实现全局方法调用

最新推荐文章于 2024-06-27 22:30:00 发布

Teamig

最新推荐文章于 2024-06-27 22:30:00 发布

阅读量911

点赞数 1

本文链接：https://blog.youkuaiyun.com/Teamig/article/details/109357438

版权

本文介绍了如何在Vue项目中实现全局的防抖函数，通过创建一个common.js文件封装函数，然后在main.js中注册，使得在各个组件中都能便捷地调用并确保函数在特定时间内仅执行一次。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求：请求防抖函数立即执行且在后续时间内不会再次执行
1.写一个common.js用来封装一下函数

export default {
    data(){
        return{
            funcloading:false,
            functimeout:undefined
        }
    },
    methods: {
        // 替换字符串中的空格和回车
        replace_null(str) {
            return str
                .replace(/\ +/g, "")
                .replace(/[ ]/g, "")
                .replace(/[\r\n]/g, "");
        },
        // 请求防抖 函数立即执行 且在后续时间内不会再次执行
        // 参数： 函数，等待时间，函数参数
        modal_debounce(func, delay, funargs) {
            if (this.funcloading == true) {
                return;
            } else {
                if (this.functimeout) {
                    clearTimeout(this.functimeout);
                }
                if(funargs){
                    func(funargs);
                }else{
                    func();
                }
                this.funcloading = true;
                this.functimeout = setTimeout(() => {
                    this.funcloading = false;
                }, delay);
            }

        }
    }
}

2.在main.js中进行全局注册

import Commonjs from './components/common';
Vue.mixin(Commonjs);

3.在组件中使用方式

<a-button
        class="filiter_item"
        @click="modal_debounce(addtoindustrypool,1000)"
        :disabled="selectedRowKeys.length == 0"
      >添加到行业词库</a-button>