VUE全局函数（应用篇）

荍290

已于 2022-05-25 11:29:53 修改

阅读量2.2k

点赞数 1

文章标签： vue.js javascript elementui

于 2022-05-20 18:17:25 首次发布

本文链接：https://blog.csdn.net/weixin_56845969/article/details/124886582

版权

字典搜索

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

// 字典
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;// 返回空对象
}