en-js

en-js

---

开发

第一次抽离以前老的后，后续开发公共方法，过滤器，mixin等，需要在test目录下 开发对应的*.test.js文件，用来测试自己开发的功能，测试完成后方能提交部署。

测试框架使用的是：jest

测试开发可以参考test/core/tool/string.test.js

---

安装

npm install --save en-js

使用

• 在mainjs中全局注册

// main.js
import Vue from "vue";
import * as en from "en-js";

Vue.use(en)

---

install

• 类型: Boject

• 默认值： { tools: true, filter: true, mixins: true, emitterMixins: false, componentMixins: false }

• 详情:

全局注册公共方法，过滤器，mixin

• 用法：

// main.js
import * as en from "en-js";
Vue.use(en, {
  // 全局挂在tool，默认为false，不全局挂在。全局挂在后使用方式为：this.$tools.方法名
  tools: false,
  // 全局挂在filter，默认为ture，自动全局挂在
  // 全局挂在后，使用方式为：$padEnd, 其中padEnd为方法名，$为全局挂在默认追加
  filter: true,
  // 全局挂在mixin，默认为true
  mixins: true
})

/**
 * tools
 */
// 全局使用，不推荐使用，需要install的时候，tools设置为true才会全局挂在
this.$tools.uuid()

// 局部使用，推荐使用局部使用
import { uuid } from "en-js";


/**
 * filter
 */
// 全局使用 dom中
{{ v | $padStart(4) }} // v = 1 => 0001

// 局部使用 
import { padStart } from "en-js";

export default {
  filters: {
    padStart // 可自定义名称
  }
}

{{ v | padStart(4) }} // v = 12 => 0012

/**
 * mixins
 * 老的_MxDispatch,_MxBroadcast,_MxFindComponentUpward,_MxFindComponentsUpward等
 * 独立导出2个mixin：emitterMixins, componentMixins，不再全局引入
 * 使用方式如下
 */
import { emitterMixins, componentMixins } from "en-js";

export default {
  mixins: [emitterMixins, componentMixins]
}

api

native 原生api

src/core/native/number.js Number对象api

thousandFormat

• 用法

  千分位格式化

• 实例

  const n = 123456789; n.thousandFormat() // 123,456,789

tool 工具库

src/core/tool/date.js 日期相关处理工具

getTimeStamp(year, month, date)

• 参数

  • 参考源码注释

• 用法

  获取一天零点的时间戳

getFirstDayOfMonth(year, month)

• 参数

  • 参考源码注释

• 用法

  获取一个月的第一天是周几

getMonthDateLen(year, month)

• 参数

  • 参考源码注释

• 用法

  获取一个月有多少天

getWholeMonthData(year, month, beginDate)

• 参数 方法

  • 参考源码注释

• 用法 方法

  获取指定月份下的所有日历面板数据

src/core/tool/number.js

executeNum(x, y, op, acc)

• 参数

  • x 值

  • y 值

  • op 操作符，0：加；1：减；2：乘；3：除

  • acc 精度（小数位），进行四舍五入

• 用法

  四则运算

thousand(value)

• 参数

  • value 值

• 用法

  千分符带两位小数点

thousandFormat(value)

• 参数

  • {Number|String} value 值

  • {Number|String} s 替换符号，默认:,

• 用法

  将数字格式化为千分位表示法

• 实例

  参考test/core/tool/number.test.js

src/core/tool/string.js

currency(n)

• 参数

  • value 值

• 用法

  金额转化

• 实例

  参考test/core/tool/string.test.js

// 可以参考
convertCurrency(1001) // =>壹仟零壹元整
convertCurrency(123) // =>壹佰贰拾叁元整

extractCssSize(str)

• 参数

  • value 值

• 用法

  去px，将"1024px"提取转换为1024 number类型的对象并返回

• 实例

// 可以参考
convertCurrency("1024px") // =>1024

hideCardNo(str, type)

• 参数

  • value 值

  • type 证件类型

    • 身份证 | 000 身份证4311**********3849保留前4位，后4位
    • 001 | 护照 | 002 | 台胞证 | 003 | 港澳通行证 | 2 保留后4位
    • 手机号 | 3 手机号186****2858保留前3位，后4位
    • 邮箱 | 4 邮箱dj*********[e-mail]保留前2位，后2位
    • 银行卡 | 5 银行卡*************** 2045保留后4位

• 用法

  号码(*)加密

• 实例

// 可以参考
convertCurrency("13712345678") // =>137****5678

padStart(v, l, s)

• 参数

  • v 值

  • l 长度

  • s 补充字符串，默认：“0”

• 用法

  头部前补充 string.padStart的封装，用于过滤器

• 实例

// 可以参考
padStart("1", 4) // =>0001
padStart("1", 4, "a") // =>aaa1

padEnd(v, l, s)

• 参数

  • v 值

  • l 长度

  • s 补充字符串，默认：“0”

• 用法

  尾部前补充 string.padEnd的封装，用于过滤器

• 实例

// 可以参考
padEnd("1", 4) // =>1000
padEnd("1", 4, "a") // =>1aaa

src/core/tool/util.js

isJSON(v)

• 参数

  • v 值

• 返回值

  true || false

• 用法

  判断是否是json字符串

• 实例

// 可以参考
isJSON("{}") // =>true
isJSON("a") // =>false

uuid(v)

• 参数

  • v 值

• 返回值

  uuid字符串

• 用法

  创建uuid

• 实例

// 可以参考
uuid() // =>uuid

formatSelect(val, list, options)

• 参数

  • { String | Number } val 值

  • ${ Array } 值需要查找的数组

  • ${ String | Object} 配置，当类型为String指定返回指定字段。让类型为Object，label指定返回字段，value指定对比字段

• 用法

  从枚举数组中格式化值

• 实例

  参考：test/core/tool/util.test.js

isIdCard(v)

• 参数

  • v 值

• 用法

  校验身份证号码

• 实例

isIdCard("43052419910214569X") // => true
isIdCard("43061119850313450X") // => false

isHongKongCard(v)

• 参数

  • v 值

• 用法

  校验港澳证件

• 实例

isHongKongCard("xxxxxx")

isTaiWanCard(v)

• 参数

  • v 值

• 用法

  校验台湾证件

• 实例

isTaiWanCard("xxxxxx")

isMobile(v)

• 参数

  • v 值

• 用法

  校验是否是移动号码

• 实例

isMobile("13311112222") // => true

isisTelephone(v)

• 参数

  • v 值

• 用法

  校验是否是固定号码

• 实例

isisTelephone("84446569") // => true

isStandPassword(v)

• 参数

  • v 值

• 用法

  校验是否是有效密码

• 实例

isStandPassword('123456')

isEmail(v)

• 参数

  • v 值

• 用法

  校验是否是合法邮箱

• 实例

isEmail('[e-mail]') // => true

isMac(v)

• 参数

  • v 值

• 用法

  校验是否是Mac地址

• 实例

isMac('xxxx')

isIP(v)

• 参数

  • v 值

• 用法

  校验是否是IP地址

• 实例

isIp('192.168.1.1')

isLicense(code)

• 参数

  • code 值

• 用法

  校验是否是三证合一

• 实例

isLicense('xxxx')

hasSpecial(v)

• 参数

  • v 值

• 用法

  是否存在特殊字符

• 实例

hasSpecial('xxxx')

isInvoiceNo(v)

• 参数

  • v 值

• 用法

  是否是发票号码

• 实例

isInvoiceNo('12345678')

isInvoiceCode(v)

• 参数

  • v 值

• 用法

  是否是发票代码

• 实例

isInvoiceCode('1234567890')

src/planforms/web/filters

thousand

• 用法

  过滤器，全局使用$thousand

• 参考

  thousand(value)

padStart

• 用法

  过滤器，全局使用$padStart

• 参考

  padStart(v, l, s)

padEnd

• 用法

  过滤器，全局使用$padEnd

• 参考

  padEnd(v, l, s)

$thousandFormat(value)

• 用法

  过滤器，全局使用$thousandFormat

• 参考

  thousandFormat(value)

src/planforms/web/mixins

暂时只抛出了老的emitterMixins componentMixins

common.js

$formatSelect({ cellValue }, list, options)

• 参数

  • { String | Number } cellValue 取至于en-table row中值

  • { Array<{label, value}> } list 数组

  • ${ String | Object} 配置，当类型为String指定返回指定字段。让类型为Object，label指定返回字段，value指定对比字段

• 用法

  用于en-table中formatter属性，用于值转换，该mixin会全局自动挂载

• 实例

<en-table-column
  prop="state"
  label="状态"
  :formatter="(v) => $formatSelect(v, stateOptions)"
>
</en-table-column>

src/planforms/web/decorator

request(loading, loadingKey, loadingConfig)

• 参数

  • { Boolean } loading 是否显示loading，默认为true

  • { String } loadingKey loading的变量key

  • { Object } loadingConfig loading的配置

• 用法

  请求装饰器，可以包装请求方法，不用重复去写try{}catch(e){}以及loading

• 实例

@request(true, "enLoading", {
  subTitle: "123",
  title: "title"
})
async test() {
  const res = await exampleService.list();
  this.datas = res.list || [];
}
@request(true, "queryLoading")
async test1() {
  const res = await exampleService.list();
  this.datas = res.list || [];
}
@request()
async test2() {
  const res = await exampleService.list();
  this.datas = res.list || [];
}
@request(false)
async test3() {
  const res = await exampleService.list();
  this.datas = res.list || [];
}

roundNumWithDeci(value, decimal)

• 参数

  • value 值

  • decimal 精度(保留几位小数,默认2)

• 用法

  用于处理数值(小数)的保留N位小数并四舍五入,小数位全为0去除

• 实例

// 可以参考
roundNumWithDeci(1.004, 2) // =>1
roundNumWithDeci(1.005, 2) // =>1.01