wti-utils-dev

v1.0.8

Published

6 months ago

一体化工具类

Downloads

0High
0Medium
0Low

yinxiang123

网页版

https://www.yuque.com/huoyanjinghuayiqie/kb/qtkspezk50flghqv?singleDoc#

npm地址

https://www.npmjs.com/package/@wti-frontend/wti-utils

开发人员看

规范

src/utils 放需要导出的方法
src/lib 放内部使用的方法

依赖安装

npm install --global rollup
Node 版本至少为 18.0.0
npm install

开发

使用 ES Module 语法开发
已配置 lodash(https://www.lodashjs.com/). 使用 import { cloneDeep } from 'lodash-es';
npm run dev 启动开发在test.js中调试

部署

npm run build 打包 npm上传index.min.js
npm publish 上传到npm

wti-utils 使用

安装

npm i @wti-frontend/wti-utils

使用

全量引入

    import wtiUtils from '@wti-frontend/wti-utils';
    
    Vue.prototype.$wtiUtils = wtiUtils;

部分引入

    import { merge , numberToChinese } from '@wti-frontend/wti-utils';

methods

`version`

| 名称 | 描述 | 类型 | | --- | --- | --- | | version | 版本号 | string |


 import { version } from '@wti-frontend/wti-utils';
 console.log(version); 	// 1.0.0

`numberToChinese`

numberToChinese(num，[options={zeroPad : true,fractionDigits : 2, round : false,amountFloatHandle ：false }])

/**
 * 数字转汉字
 * @params num {number|string}
 * @params options {object}
 * options : { <br>
 *   zeroPad : true, //是否补0  amountFloatHandle 为 true生效 <br>
 *   fractionDigits : 2, //保留位数，round为true也表示从四舍五入的位数  amountFloatHandle 为 true生效 <br>
 *   round : false //是否四舍五入 amountFloatHandle 为 true生效 <br>
 *   amountFloatHandle ：false //是否对源num进行浮点操作(内部调用amountFloat) <br>
 * } <br>
 * @return {string|any}  chineseStr 转化后的金额汉字
 * @version v1.0.5
 * @example
 *
 *     numberToChinese(1212.51212), //壹仟贰佰壹拾贰元伍角壹分贰毫壹厘
 *     numberToChinese(1212.51212, {
 *         amountFloatHandle : true,
 *         fractionDigits : 2
 *     }), //壹仟贰佰壹拾贰元伍角壹分
 *     numberToChinese('0.00', {
 *         amountFloatHandle : true,
 *         fractionDigits : 3
 *     }), //零元整
 *     // 不合法的值 返回原值
 *     numberToChinese(''), //''
 *     numberToChinese(null), //null
 *     numberToChinese(undefined), //undefined
 *     numberToChinese([]) // []
 * */

`moneyFormat` 废弃

moneyFormat(num , [digit = 2] , [isCut = false])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | moneyFormat | 金额格式化(千分符 + 补0) | function | | @params | num | {number|string|null(null视为0)} | | @params | digit 默认值2 表示补零几位小数点后如果 0 位或者 1 位，那么自动补零到 2 位。 | string | | @params | isCut 默认值false 当小数位大于digit设定值时，是否对小数位进行额外的截取处理，默认不处理 | boolean | | @return | 格式化后的金额 | string |


import { moneyFormat } from '@wti-frontend/wti-utils';
console.log(
    moneyFormat(null), //null 0.00
    moneyFormat('10,000'), //10,000 不合法 直接返回原值
    moneyFormat('10w000'), //10w000 不合法 直接返回原值
    moneyFormat('10000'), //100,000.00
    moneyFormat(NaN), // NaN
    moneyFormat('NaN'), //'NaN'
    moneyFormat(121212334.1212), // 121,212,334.1212
    moneyFormat(121212334.1212 , 2 , true), // 121,212,334.12
    moneyFormat(121212334.1212 , 3 , true), // 121,212,334.121
    moneyFormat(121212334.1212 , 3 , false), // 121,212,334.1212
    moneyFormat(-100000), //-100,000.00
    moneyFormat(undefined), // undefined 不合法直接返回 num
    moneyFormat([1]) // [1] 不合法直接返回 num
)

`cardPadingSpace`

cardPadingSpace(value)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | cardPadingSpace | 卡号加空格(每四位添加空格) | function | | @params | value | string | | @return | 格式化后的银行卡号 | string |


import { cardPadingSpace } from '@wti-frontend/wti-utils';
console.log(
    cardPadingSpace(null), //null 不合法直接返回原值
    cardPadingSpace('123456789123456789'), //1234 5678 9123 4567 89
    cardPadingSpace(121212),//121212 不合法直接返回原值
    cardPadingSpace('') // ''
)

`stringReplaceStar`

stringReplaceStar(value , [reserveStart = 4] , [reserveEnd=4])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | stringReplaceStar | 字符串替换为星号 | function | | @params | value 卡号 | string | | @params | reserveStart 默认4 保留前reserveStart位 | number | | @params | reserveEnd 默认4 保留后reserveEnd位 | number | | @return | 替换后的字符串 | string |


import { stringReplaceStar } from '@wti-frontend/wti-utils';
console.log(
    stringReplaceStar('1561245121212'), // 1561****1212
    stringReplaceStar('1561245121212' , 5 , 5), // 15612****21212
    stringReplaceStar('10000' , 5 , 5), // 10000
    stringReplaceStar('10000' , -1 , 5), // Error: reserveStart参数 必须为0或正整数
    stringReplaceStar('10000' , 1 , -1), // Error: reserveEnd参数 必须为0或正整数
    stringReplaceStar('10000' , 1 , 0), // 1****
    stringReplaceStar('10000' , 0 , 1), // ****0
    stringReplaceStar('10000' , 1 , 1), // 1****0
    stringReplaceStar('10000' , 0 , 0), // ****
    stringReplaceStar(10000), // 10000 不合法 直接返回
)

`multiply`

multiply(num1 , num2)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | multiply | 两个数字做乘法 | function | | @params | num1 | number | | @params | num2 | number | | @return | 乘后的数 | number |


import { multiply } from '@wti-frontend/wti-utils';
console.log(
    multiply(1 , 2), //2
    multiply(2 , 0), //0
    multiply(null , undefined), //NaN
    multiply(1.112 , 2.12121), //2.35878552
    multiply(-1.112 , 2.12121), //-2.35878552
    multiply(-1.112 , -2.12121), //2.35878552
    multiply(1.112 , -2.12121) //-2.35878552
)

`divid`

divid(num1 , num2)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | divid | 两个数字做除法 | function | | @params | num1 | number | | @params | num2 | number | | @return | 除后的数 | number |


import { divid } from '@wti-frontend/wti-utils';
console.log(
    divid(1 , 2), //0.5
    divid(2 , 0), //Infinity
    divid(2 , undefined), //NaN
    divid(2 , 1), //2
    divid(-2 , 1), //-2
    divid(-1, -2), //0.5
    divid(2 , -1), //-2
    divid(2.121212 , -2.1) //-1.0101009523809523
)

`add`

add([nums])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | add | 数字相加 | function | | @params | [nums] | ...number | | @return | 加后的数 | number |


import { add } from '@wti-frontend/wti-utils';
console.log(add(1 , 2 , 3)); // 6

`isDef`

isDef(value)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | isDef | 判断非空 (非undefined & 非null） | function | | @params | value | any | | @return | true|false | boolean |


import { isDef } from '@wti-frontend/wti-utils';
console.log(
    isDef(undefined), //false
    isDef(null), //false
    isDef(2), //true
    isDef(''), //true
    isDef({}), //true
    isDef([]), //true
)

`isEmpty`

isEmpty(value)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | isEmpty | 判断是否为空包含（undefined | null | ''）为空 | function | | @params | value | any | | @return | true|false | boolean |


import { isEmpty } from '@wti-frontend/wti-utils';
console.log(
    isEmpty(undefined), //true
    isEmpty(null), //true
    isEmpty(2), //false
    isEmpty(''), //true
    isEmpty({}), //false
    isEmpty([]), //false
)

`deepClone` 废弃

deepClone(value)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | deepClone | 深拷贝 | function | | @params | value | any | | @return | 拷贝后的value | any |


import { deepClone } from '@wti-frontend/wti-utils';
const oldSet = new Set([1]);
const newSet = deepClone(oldSet);
oldSet.add(2);
console.log(oldSet); //Set(2) {1, 2}
console.log(newSet); //Set(1) {1}

const oldObj = {
    a : 1 ,
    b:()=>{
        return 'b'
    }
};
const newObj = deepClone(oldObj);
oldObj.a = 2
oldObj.b = null;
console.log(oldObj.a); //2
console.log(newObj.a); //1
console.log(newObj.b()); //b


console.log(deepClone(undefined)); //undefined
console.log(deepClone(null)); //null

`merge`

merge(target , [sources])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | merge | 合并(浅拷贝，整体参考Object.assign) | function | | @params | target 目标对象 {非undefined || 非null} | !undefined & !null | | @params | [sources] | ...object | | @return | 合并后的 | any |


import { merge } from '@wti-frontend/wti-utils';

//(浅拷贝 ， 会改变目标对象)整体参考Object.assign 不一样的地方是当{a : undefined} a为undefined 会跳过
console.log(merge({a : 1} ,{a : 2},  {a : undefined})); // {a: 2}


const oldObj = {b : 2};
merge(oldObj , {b : 1});
console.log(oldObj); //{b: 1}


const oldObj1 = {b : {c : 3}};
const newObj = merge({a : 1} , oldObj1);
newObj.b.c = 4;
console.log(oldObj1.b.c); // 4
console.log(newObj.b.c); // 4



const oldObj2 = {b : 1};
const newObj2 = merge({b : {c : 3}} , oldObj2);
console.log(oldObj2.b); //1
console.log(newObj2.b); // 1

const oldObj3 = [1 , 2];
const newObj3 = merge([3 , 4] , oldObj3);
console.log(newObj3); //[1 , 2]

`validate`

| 名称 | 描述 | 类型 | 返回值 | | --- | --- | --- | --- | | validate | 校验对象 | object | | | validate.positiveCheck | 正数校验 | function | function | | validate.numberSizeCheck | 数字大小校验 | function | function | | validate.wtiFormRateCheck | wtiform利率校验 | function | function | | validate.nonNegativeNumberCheck | 非负数校验 | function | function | | validate.wtiFormMoneyLengthCheck | wtiform金额长度校验（万元，元） | function | function |

`validate.positiveCheck`

validate.positiveCheck()

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | numberSizeCheck | 正数校验 | function | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate } from '@wti-frontend/wti-utils';
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="金额校验" prop="money">\n' +
        '    <el-input v-model="form.money"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            money : ''
        },
        rules : {
            money : [
                // 正数校验
                { validator: validate.positiveCheck() , trigger: [ 'blur' , 'change' ] }
            ]
        }
    }
});

`validate.numberSizeCheck`

validate.numberSizeCheck([{max,min}])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | numberSizeCheck | 数字大小校验 | function | | @params | {max,min}max,mix为最大和最小值有则校验没有则不校验 | object | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate } from './index.js';
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="金额校验" prop="money">\n' +
        '    <el-input v-model="form.money"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            money : ''
        },
        rules : {
            money : [
                //数字大小校验
                //最小值为1
                { validator: validate.numberSizeCheck({min : 1}) , trigger: [ 'blur' , 'change' ] },
                //最大值为5
                { validator: validate.numberSizeCheck({max : 5}) , trigger: [ 'blur' , 'change' ] },
                //最小值为1 , 最大值为5
                { validator: validate.numberSizeCheck({min : 1 , max : 5}) , trigger: [ 'blur' , 'change' ] },
                // 不校验
                { validator: validate.numberSizeCheck() , trigger: [ 'blur' , 'change' ] },
            ]
        }
    }
});

`validate.wtiFormRateCheck`

validate.wtiFormRateCheck()

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | wtiFormRateCheck | wtiform利率校验（前6后8） wtiForm输入的百分比会除100返回数值，如：10%，得到的值会是：0.1 | function | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate,divid } from '@wti-frontend/wti-utils';
const wtiFormRateCheck = validate.wtiFormRateCheck();
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="利率" prop="rate">\n' +
        '    <el-input v-model="form.rate"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            rate : ''
        },
        rules : {
            rate : [
                //利率校验
                {
                    validator:(rule, value, callback)=>{
                        //这里模拟一下wti-form 利率value会除100
                        wtiFormRateCheck(rule, divid(value , 100), callback);
                    } ,
                    trigger: [ 'blur' , 'change' ]
                },
            ]
        }
    }
});

`validate.nonNegativeNumberCheck`

validate.nonNegativeNumberCheck()

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | wtiFormRateCheck | 非负数校验 | function | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate } from '@wti-frontend/wti-utils';
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="金额校验" prop="money">\n' +
        '    <el-input v-model="form.money"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            money : ''
        },
        rules : {
            money : [
                // 正数校验
                { validator: validate.nonNegativeNumberCheck() , trigger: [ 'blur' , 'change' ] }
            ]
        }
    }
});

`validate.wtiFormMoneyLengthCheck`

validate.wtiFormMoneyLengthCheck([type])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | wtiFormMoneyLengthCheck | wtiform金额长度校验 (元前12后2 万元前8后6) wtiForm输入的万元会乘10000 输入1 会得到 10000 | function | | @params | type 为wan 时校验万元非wan则校验元 | string | undefined | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate,multiply } from '@wti-frontend/wti-utils';
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="利率" prop="money">\n' +
        '    <el-input v-model="form.money"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            money : ''
        },
        rules : {
            money : [
                //金额校验(万元)
                {
                    validator:(rule, value, callback)=>{
                        const wtiFormMoneyLengthCheck = validate.wtiFormMoneyLengthCheck('wan');
                        //这里模拟一下wti-form 万元value会乘10000
                        wtiFormMoneyLengthCheck(rule, multiply(value , 10000), callback);
                    } ,
                    trigger: [ 'blur' , 'change' ]
                },
                //金额校验(元)
                {
                    validator:validate.wtiFormMoneyLengthCheck(),
                    trigger: [ 'blur' , 'change' ]
                },
            ]
        }
    }
});

`validate.idCardCheck`

validate.idCardCheck()

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | idCardCheck | 身份证校验 | function | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate } from '@wti-frontend/wti-utils';
new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="身份证" prop="idcard">\n' +
        '    <el-input v-model="form.idcard"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            idcard : ''
        },
        rules : {
            idcard : [
                // 正数校验
                { validator: validate.idCardCheck() , trigger: [ 'blur' , 'change' ] }
            ]
        }
    }
});

`validate.enterpriseCodeCheck`

validate.enterpriseCodeCheck()

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | enterpriseCodeCheck | 企业统一信用代码验证 | function | | @return | function | function |

// 开发人员直接copy代码到test.js 就可以使用 '@wti-frontend/wti-utils' 改为 './index.js'
import { validate } from '@wti-frontend/wti-utils';

new Vue({
    el : '#app',
    template :
        '<el-form ref="form" :model="form" :rules="rules" label-width="80px">\n' +
        '  <el-form-item label="企业统一信用代码" prop="code">\n' +
        '    <el-input v-model="form.code"></el-input>\n' +
        '  </el-form-item>\n' +
        '</el-form>',
    data: {
        form : {
            code : ''
        },
        rules : {
            code : [
                // 正数校验
                { validator: validate.enterpriseCodeCheck() , trigger: [ 'blur' , 'change' ] }
            ]
        }
    }
});

`validate.integerCheck`

validate.integerCheck()

/**
 * 整数校验
 * @return function
 * @version v1.0.7
 * @example
 *     validate.integerCheck(), //校验是否整数
 * */

`validate.numberDigitCheck`

validate.numberDigitCheck([integerDigit='*'] , [decimalDigit='2'],[customErrMsg=undefined])

/**
 * 数字长度校验 <br>
 * @param [integerDigit] {string | number} 整数位  默认*{>=1的整数|'*'} <br>
 * @param [decimalDigit] {string | number} 小数位 默认2{>=0的整数|'*'} <br>
 * @param [customErrMsg] {string} 自定义错误提示 <br>
 * @return function
 * @version v1.0.7
 * @example
 *
 *     validate.numberDigitCheck('*' , 2), //校验小数后2位
 *     validate.numberDigitCheck('*' ，'*'), //不校验位数
 *     validate.numberDigitCheck(2 ， '*'), //只校验整数
 *     validate.numberDigitCheck(12 , 2), //校验整数12位 ， 小数2位
 * */

`timeFormat`

timeFormat([dateTime=''] , [format='yyyy-mm-dd'])

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | timeFormat | 时间格式化 | function | | @params | dateTime 日期时间 | {''|undefined|null|Date|Number} | | @params | format 格式化的替换规则 'yyyy-mm-dd hh:MM:ss' y = 年m = 月d = 日h = 时M = 分s = 秒 | {string} | | @return | 格式化后的 | {string} |


import { timeFormat } from '@wti-frontend/wti-utils';
console.log(
    timeFormat(), //2024-03-11 当前时间
    timeFormat(new Date(15656218512121) , 'yyyy-mm-dd hh:MM:ss'), //2466-02-15 13:35:12
    timeFormat('', 'yyyy-mm-dd hh:MM:ss'), //2024-03-11 16:36:05 当前时间
    timeFormat(undefined, 'yyyy-mm-dd hh:MM:ss'), //2024-03-11 16:36:05 当前时间
    timeFormat(null , 'yyyy-mm-dd hh:MM:ss'), //2024-03-11 16:36:05 当前时间
    timeFormat(15656218512121 , 'yyyy-mm-dd hh:MM:ss'), // 2466-02-15 13:35:12
    timeFormat(1 , 'yyyy-mm-dd hh:MM:ss'), // 1970-01-01 08:00:00
    timeFormat('' , 'yyyy//mm$/dd hh++MM*ss'), // 2024//03$/11 16++44*23
    //当匹配到的位数大于1时且当前时间小于位数，会在前面自动补0
    timeFormat('' , 'y-m-dd'), // 2024-3-11
    timeFormat('' , 'yyyyy-mm-ddd'), // 02024-03-011
    // 不合法的情况
    timeFormat({} , 'yyyy-mm-dd'), // 不合法返回原值 {}
    timeFormat('111' , 'yyyy-mm-dd'), // 不合法返回原值 '111'
);

`hasOwn`

hasOwn(target,key)

| 名称 | 描述/参数 | 类型 | | --- | --- | --- | | hasOwn | 是否存在某个key（不含原型链） | function | | @params | target | {object} | | @params | key | {string} | | @return | | {boolean} |

import {hasOwn} from '@wti-frontend/wti-utils';
const obj = {
    a : 1,
    b : 2
}
console.log(
    hasOwn(obj , 'a'), //true
    hasOwn(obj , 1),//false
    hasOwn(obj , []),//false
    hasOwn([] , 'length'), //true
    hasOwn([] , '0'), //false
    hasOwn(undefined , '0') //会报错
)

`amountFloat`

amountFloat(amount，[options={zeroPad : true,fractionDigits : 2, round : false}])

/**
 * 金额转化为浮点数
 * @params amount {string|number}
 * @params options {object}
 * options : { <br>
 *   zeroPad : true, //是否补0 <br>
 *   fractionDigits : 2, //保留位数，round为true也表示从四舍五入的位数 <br>
 *   round : false //是否四舍五入 <br>
 * } <br>
 * @return string 金额
 * @version v1.0.5
 * @example
 *
 *     amountFloat(1.799), // 1.79
 *     amountFloat(1.799 , {
 *         round : true,
 *         fractionDigits : 2,
 *         zeroPad : false
 *     }), // 1.8
 *     amountFloat(1.799 , {
 *         round : true,
 *         fractionDigits : 2,
 *         zeroPad : true
 *     }), // 1.80
 *     amountFloat(1.799 , {
 *         round : false,
 *         fractionDigits : 3,
 *     }), // 1.799
 *     amountFloat(1.7999999 , {
 *         fractionDigits : undefined,
 *     }), // 1.7999999  //不对小数做截取amountFormat ， numberToChinese的options 同理
 *     // 不合法的值 返回原值
 *     // amountFloat , amountFloat ,numberToChinese 校验数字合法为同一套逻辑
 *     amountFloat(''), //''
 *     amountFloat(null), //null
 *     amountFloat(undefined), //undefined
 *     amountFloat([]) // []
 */

`amountFormat`

amountFormat(amount，[options={zeroPad : true,fractionDigits : 2,round : false}])

/**
* 金额格式化(千分符 + 补0)
* @params amount {number|string}
* @params options {object}
* options : { <br>
*   zeroPad : true, //是否补0 <br>
*   fractionDigits : 2, //保留位数，round为true也表示从四舍五入的位数 <br>
*   round : false //是否四舍五入 <br>
* } <br>
* @return {string} 格式化后的金额 100000->100,00.00
* @version v1.0.5
 * @example
 *
 *     amountFormat(123456789), //123,456,789.00
 *     amountFormat(-123456789), //-123,456,789.00
 *     amountFormat(123456789 , {
 *         zeroPad : false
 *     }), // 123,456,789
 *     amountFormat(1234.15647 , {
 *         fractionDigits : 4
 *     }), //1,234.1564
 *     amountFormat('1234.15647' , {
 *         fractionDigits : 2,
 *         round : true,
 *     })// 1,234.16
 *      // 不合法的值 返回原值
 *     amountFormat(''), //''
 *     amountFormat(null), //null
 *     amountFormat(undefined), //undefined
 *     amountFormat([]) // []
* */

`getTargetType`

getTargetType(target)

/**
* 获取目前对象的类型
* @params target {any}
* @return {string} 类型
* @version v1.0.5
 * @example
 *
 *     getTargetType({}), //object
 *     getTargetType([]), //array
 *     getTargetType(null), //null
* */

mapUtils

mapUtils(functionNameMap)

/**
 * 辅助函数mapUtils <br>
 * @param functionNameMap {array | object} ['functionName'] | {'自定义属性' : 'functionName'} | {'自定义属性' : {name : string , [handler] : function , [ctx] : any} <br>
 * @return {object} <br>
 * @version v1.0.8
 * @example
 *     // ['functionName']
 *     mapUtils([ 'hasOwn' , 'getTargetType' ]) // {hasOwn : f , getTargetType : f}
 *
 *     // {'自定义属性' : 'functionName'}
 *     mapUtils({
 *         'myHasOwn' : 'hasOwn'
 *     }), // {myHasOwn : f=>hasOwn}
 *
 *    //进阶
 *    //{'自定义属性' : {name : string , [handler] : function , [ctx] : any}
 *     mapUtils({
 *         'myHasOwn' : {
 *             name : 'hasOwn',  //函数名
 *             handler(fn , ...res),  //自定义函数  fn：为name匹配到的函数 ...res 为参数 ，不填等价于 {myHasOwn ：hasOwn} 勿使用箭头函数会导致this失效
 *             ctx : {}   //执行环境  // handler有效时生效 不填为默认的执行环境  vue methods中 因为vue会自己bind一次 所以handler中 this为 vue
 *         }
 *     }), // {myHasOwn : f=>hasOwn}
 *
 *     mapUtils.functionNames(), //返回支持的所有functionName集合
 * */

import { mapUtils } from '@wti-frontend/wti-utils';
//一
// ['functionName']
new Vue({
    el : '#app',
    template :
        '<div>{{ isDef(0) }} {{add(1 , 2)}}</div>',
    methods:{
        ...mapUtils(['isDef' , 'add'])
    }
});

//二
// {'自定义属性' : 'functionName'}
new Vue({
    el : '#app',
    template :
        '<div>{{ cusIsDef(0) }} {{cusAdd(1 , 2)}}</div>',
    methods:{
        ...mapUtils({
            cusIsDef : 'isDef',
            cusAdd : 'add'
        })
    }
});

//三 
//{'自定义属性' : {name : string , [handler] : function , [ctx] : any}
new Vue({
    el : '#app',
    template :
        '<div>{{ cusIsDef(0) }} {{cusAdd(1 , 2)}}</div>',
    methods:{
        ...mapUtils({  //无handler
            cusIsDef : {
                name : 'isDef'
            },
            cusAdd : {
                name : 'add'
            },
        })
    }
});

//四  进阶用法
//{'自定义属性' : {name : string , [handler] : function , [ctx] : any}
//name : 'hasOwn',  //函数名
//handler(fn , ...res),  //自定义函数  fn：为name匹配到的函数 ...res 为参数 ，不填等价于 {myHasOwn ：hasOwn} 勿使用箭头函数会导致this失效
//ctx : {}   //执行环境  // handler有效时生效 不填为默认的执行环境  vue methods中 因为vue会自己bind一次 所以handler中 this为 vue
new Vue({
    el : '#app',
    template :
        '<div>{{ cusIsDef(0) }} {{cusAdd()}} {{cusMoneyFormat()}}</div>',
    data (){
      return{
          nums : [1 , 2 , 3]
      }
    },
    methods:{
        ...mapUtils({
            cusIsDef : {
                name : 'isDef',
                handler : (fn , value)=>{ // fn为 isDef 固定在第一位
                    return fn(value) //等价于 isDef(value)
                }
            },
            cusAdd : {
                name : 'add',
                handler(fn){
                    console.log('this' , this)  //指向vue  vue methods中 因为vue会自己bind一次 所以handler中 this为 vue
                    return fn(...this.nums) // 有handler 无ctx 时 ， 指向vue 勿使用箭头函数会导致this失效
                }
            },
            cusMoneyFormat : {
                name : 'moneyFormat',
                handler(fn){
                    console.log('this' , this)// 此时this指向ctx
                    return fn(this.money)
                },
                ctx : { //执行环境
                    money : '100000'
                }
            },
        })
    }
});


//五 获取支持的functionName
console.log(mapUtils.functionNames())

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

网页版

npm地址

开发人员看

规范

依赖安装

开发

部署

wti-utils 使用

安装

使用

methods

version

numberToChinese

~~moneyFormat~~ 废弃

cardPadingSpace

stringReplaceStar

multiply

divid

add

isDef

isEmpty

~~deepClone~~ 废弃

merge

validate

validate.positiveCheck

validate.numberSizeCheck

validate.wtiFormRateCheck

validate.nonNegativeNumberCheck

validate.wtiFormMoneyLengthCheck

validate.idCardCheck

validate.enterpriseCodeCheck

validate.integerCheck

validate.numberDigitCheck

timeFormat

hasOwn

amountFloat

amountFormat

getTargetType