VUE全局函数(应用篇)

目录

字典搜索

删除对象空值

计算两个时间的时间差

 防抖函数

 对象数组去重

对象数组排序

金额加千分位

千分位转数字

获取当前日期(yyyy-mm-dd)

获取当前时间(格式:HH:MM:SS) 

数组求和(reduce)

表单重置


 


字典搜索

根据数字字典码值获取字段的值

// 字典
export const CONFIGDATA =[
{id:'0',name:'张三',type:'down',age:23,scool:'S_OP'},
{id:'2',name:'李四',type:'down',age:23,scool:'S_OP'},
{id:'3',name:'王五',type:'down',age:23,scool:'S_OP'}
];
每个文件对这个查找逻辑都处理一遍,会很冗余。可在function.js文件中声明引用。
// function.js中
export function codeBy(code,array,name){
    // 当索引不是数组字典返回空
    if(!Array.isArray){
        retuen '';
    }
    let result;
     // 根据字典ID找到该值
    let valObj = array.find((v)=>{v.id===`${code}`});
    if(valObj){
        // 根据值的名,找对应的名字等
        result=valObj[name];
    }else{
        result = '';
    }
    return result;

}

引用时,引入文件;例如:codeBy('3',CONFIGDATA,'age');// 23

删除对象空值

对象入参时候,常常表单入参较多,但是有些不是必传可以不传。

let params = {
    name:'',
    userList:[],
    age:null,
    type:'WALL'
};

 常常用 delete params.name; delete params.age;

// function.js中
export function delObjNull(params = {}, ...restStr){
    // 删除指定字段
    restStr.forEach((m)=>{delete params[m];});
    // 删除空数组、空字符串、undifined、null
    Object.keys(params).forEach((k)=>{
        if(
            params[k]==='' || params[k] === undifined
            || params[k] === null ||
            (Array.isArray(params[k]) && !params[k].length)
        ){
            delete params[k];
        }
    });
}

调用:delObjNull(params,'userName','id','prodId');// 删除params空的,删除指定字段--userName、id、prodId

计算两个时间的时间差

data1  data2 两个时间-格式:2022-05-20 返回 iDays(Number)

// function.js中
export function dataDifference(data1,data2){
    let dataSpan;
    let iDays;
    data1 = Data.parse(data1);
    data2 = Data.parse(data2);
    // 取绝对值
    dataSpan = Math.abs(data2 - data1);
    iDays = Math.floor(dataSpan / (24*3600*1000));
    return iDays;
}

 防抖函数

// 防抖函数
// fn [function] 需要防抖的函数
// delay [number] 毫秒,防抖期限值
// immediate[boolean] 是否立即执行

export function debounceFn(fn ,delay ,immediate){
    let timer = null ;
    const t = delay || 500;
    funtion debounce(...args){
        const self = this;
        if(timer){
            clearTimeout(timer);
        }
        if(immediate){
            const callNow = !timer;
            // 定义t时间后把timer变为nul,即在t时间之后事件才会有效
            timer = setTimeout(()=>{timer = null;},t);
            // 如果callNow为true,即原本timer为null,那么执行fn
            if(callNow){
                 self[fn](...args);
            }
        }else{
            timer = setTimeout(()=>{ self[fn](...args); },t);
        }
    }
}

 对象数组去重

export function unique(arr,uniqueKey){
    const res = new Map();
    return arr.filter((item)=>(!res.has(item[uniqueKey]) && res.set(item[uniqueKey]));
}

对象数组排序

// 升序
export function sortByKek(arr,uniqueKey){
    retuen arr.sort((a,b)=>{
        let x = a[key];
        let y = b[key];
        if(x === undefined){
            return 1;
        }
        if(y === undefined){
            return -1;
        }
        let sort = x > y : 1: 0;
        return x<y ? -1:sort;
    });
}
// 降序
export function downSortByKek(arr,uniqueKey){
    retuen arr.sort((a,b)=>{
        let x = b[key];
        let y = a[key];
        let sort = (x > y) : 1: 0;
        return (x < y) ? -1 : sort;
    });
}

金额加千分位


export function formatMoney(val,type = 2){
    if( val === '' || val === 0){
        return '0.00';
    }
    val = Number(val);
    if(isNaN(val)){
        return '';
    }
    return val.tofixed(type).replace(/(\d)(?=(\d{3})+\.)/g, '$1,');
}

千分位转数字


export function delCommaFn(num){
    if(!num){
        return num;
    }
    num = num.toString();
    num = num.replace(/,/gi,'');
    return num;
}

获取当前日期(yyyy-mm-dd)

export function getNowTime(num){
    let date = new Date();
    let years = date.getFullYear();
    let month = date.getMonth() + 1 ;
    let day = date.getDate();
    month = (month >=0 && month <=9) ? `0${month}`: month ;   
    day = (day >=0 && day <=9) ? `0${day}`: day ;   
    // 获取当前日期 格式(YYYY-MM-DD)
    let nowData= `${day }-${month }-${day }`;
    return nowData;
} 

获取当前时间(格式:HH:MM:SS) 

export function getNowTime(num){
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    hours = (hours >=0 && hours <=9) ? `0${hours}`: hours;
    minutes = (minutes >=0 && minutes <=9) ? `0${minutes }`: minutes ;   
    seconds = (seconds >=0 && seconds <=9) ? `0${seconds }`: seconds ;   
    // 获取当前时间 格式(HH:MM:SS)
    let time = `${hours}:${hours}:${seconds}`;
    return time;
} 

数组求和(reduce)

export function sumArray(arr){
    // arr 为 ['1',23,56,89,56,44];
    return arr.reduce((sum,val)=> sum + Number(val) , 0 );
} 

若为对象数组 

export function sumObjArray(arr,key){
    // arr 为 [{num:23},{num:25},{num:69},{num:25}];
    return arr.reduce((sum,val)=> sum + Number(val[key]) , 0 );
} 

表单重置

export function formReset(obj){
    // from:{chanel:"APP",userName:"zhangsan",proType:[]}
    // 传值
    // const setData = (val,key) => this.$set(obj,`${key}`,val);
    // 或者
    const setData = (val,key) => obj[k]=val;

    Obj.keys(obj).forEach((k)=>{
        if(Array.isArray(obj[k])){
            setData([],`${k]}`); // 若为数组
        }else{
            setData('',`${k]}`); // 若为其他
        }
    });
    
    return obj;// 返回空对象
} 

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue 3 中,你可以使用 `app.config.globalProperties` 来定义全局函数,并且可以在整个应用程序中访问这些函数。 要传递参数给全局函数,你可以使用闭包或者使用一个工厂函数来创建一个带有参数的全局函数。 以下是使用闭包的示例: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 定义全局函数 app.config.globalProperties.myGlobalFunction = (param) => { console.log('参数:', param); }; app.mount('#app'); ``` 在应用程序的任何组件中,你都可以直接调用 `myGlobalFunction` 并传递参数: ```javascript // MyComponent.vue export default { mounted() { // 调用全局函数并传递参数 this.$root.myGlobalFunction('Hello'); }, }; ``` 使用工厂函数的示例: ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; const app = createApp(App); // 定义带有参数的全局函数的工厂函数 const createMyGlobalFunction = (param) => { return () => { console.log('参数:', param); }; }; // 创建带有参数的全局函数 app.config.globalProperties.myGlobalFunction = createMyGlobalFunction('Hello'); app.mount('#app'); ``` 同样,在应用程序的任何组件中,你可以直接调用 `myGlobalFunction`: ```javascript // MyComponent.vue export default { mounted() { // 调用全局函数 this.$root.myGlobalFunction(); }, }; ``` 这样,你就可以在 Vue 3 中传递参数给全局函数了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值