lm-methods
提供部分公共函数
引用示例：
import {formatDate} from "lm-ui-element/lib/utils/global-methods";
| 函数名 | 说明 | 参数说明 | 返回值 |
|---|---|---|---|
| formatDate | 日期格式化，年月日 | 接收两个参数，第一个参数为时间(date:String/Number/Date,connector)，第二个参数为日期连接符，默认为'/' | 字符串格式日期 |
| formatDateTime | 日期格式化，年月日 时分秒 | 接收两个参数，第一个参数为时间(date:String/Number/Date,connector)，第二个参数为日期连接符，默认为'/' | 字符串格式日期 |
| noRepeatArrHasObject | 带对象的数组去重 | 接收两个参数，第一个参数为需要去重的目标数组(arr:Array)，第二个参数为用于比较的具有唯一值的id属性名(onlyId:String)，默认为"id" | 去重后的数组 |
| isIEFun | 是否是ie浏览器 | -- | true或false |
| isEdgFun | 是否是edg浏览器 | -- | true或false |
| compressImageFun | 判断文件类型与压缩图片 | 接收一个对象做参数：{file, width, height, quality = 0.8, maxWidth = 1920, maxHeight = 1080,compressSize=200000,maxSize=9000000},file:File,二进制图片数据；width:Number,图片宽度；height:Number,图片高度；quality:Number,压缩质量，默认0.8，可选值0.1~1；maxWidth:Number,最大宽度，默认1920；maxHeight:Number,最大高度，默认1080；compressSize:Number,图片大于多少开始压缩，单位字节，默认200000字节；maxSize:Number,可接受的最大大小，单位字节，默认9000000字节 | 返回对象:{code:Number,msg:String,data:File}。code=1，成功；code=2成功但压缩后的图片大小大于maxSize；data为二进制文件数据 |
| base64ToBlob | 将base64转换为blob | 接收一个参数，base64字符串（base64Str:String） | Blob |
| base64ToFile | 将base64转换为file | 接收一个参数，base64字符串（base64Str:String） | File |
| toThousands | 金额格式（分隔） | 接收两个参数，第一个参数是数字num:Number，第二个参数是是否带小数isFloat:Boolean,默认true | File |
lm-validate
提供验证函数
引用示例：
import {isvalidPhone} from "lm-ui-element/lib/utils/lm-validate";
| 函数名 | 说明 | 参数说明 | 返回值 |
|---|---|---|---|
| isvalidPhone | 验证手机号 | (phone:any) | true或false |
| isvalidCardNo | 验证身份证 | (idCard:any) | true或false |
| isvalidBankNo | 验证银行卡 | (bankNo:any) | true或false |
| isvalidNo | 非数字证验证 | (str:any) | true或false |
| isValidDate | 判断日期格式是否正确 | (dateTime:any) | 返回对象，正确时返回{dateTime:Date,isValid:true},错误时返回{isValid:false} |
| isNumber | 判断是否为数字，整数或者小数 | (val:any) | true或false |
lm-validate-methods
封装elememt-ui的自定义表单验证方法,rule, value, callback是element-ui自定义验证回调参数
引用用法示例：
import {validPhone} from "lm-ui-element/lib/utils/lm-validate-methods";
data(){
return {
rules:{
mobile: [{required: true, validator:validPhone,trigger: ['blur', 'change']}],
}
}
}
| 函数名 | 说明 | 参数说明 |
|---|---|---|
| validPhone | 验证手机号 | (rule, value, callback) |
| validIDCard | 验证身份证 | (rule, value, callback,config) ，其中config为配置项，可选配置参数为：maxAge 最大年龄 Number，默认81 ；minAge 最小年龄 Number，默认15 |
| validBankNo | 验证银行卡 | (rule, value, callback) |
| towPassIsAlike | 两次密码是否一致校验 | (rule, value, callback,confirmPass) ,其中confirmPass为确认密码 |
| validAddressInfo | 检查地址是否完善，通常和地址组件lm-address配套使用 | (rule, value, callback,config) ，config为配置对象，可配置参数为：msg 错误信息 String，默认值“请完善地址信息”；isReset 是否是重置表单 Boolean |
| validMultiSelect | 多个级联下拉框校验，通常配合lm-select form-type="multiSelect"使用 | (rule, value, callback,length,msg) ，length是下拉框个数 Number，msg是信息 String，默认为“请完善信息” |
| validRangeDateTime | 验证时间范围，通常配合lm-date-time form-type="rangeDateTime" 使用， | (rule, value, callback，msg,stopValid) ，其中msg时错误信息 String，默认为“请完善信息”，stopValid为是否停止验证的条件 Boolean |
| validateChinese | 中文校验 | (rule, value, callback,config) ，其中config为配置对象，可选参数为：msgs 错误信息，Array，默认值是['请输入'] ； min 字符最小长度 Number ；max 字符最大长度 Number ； required 是否必须 Boolean ,默认值true |
| validateAbcAndNumber | 字母数字校验 | (rule, value, callback,config) ,其中config为配置对象，可选参数为：msg 错误信息 String，默认值是"请输入数字或者字母" ； min 字符最小长度 Number ；max 字符最大长度 Number ； required 是否必须 Boolean ,默认值true |
| validateCertificateNo | 企业资质编号校验 | (rule, value, callback,config) ,其中config为配置对象，可选参数为：msg 错误信息 String，默认值"企业资质编号为中文开头的13~20位字符串"； required 是否必须 Boolean ,默认值true |
| validateLngLat | 经纬度校验 | (rule, value, callback,isLgnOrLat) ,isLgnOrLat用于区分 是经度还是纬度 String，可选值有lng 经度,lat 纬度 |
| validateAbcAnd_ | 验证字母和下划线正则 | (rule, value, callback,config) ,其中config为配置对象，可选参数为：msg 错误信息 String，默认值是"请输入字母和下划线组成的字符串" ； required 是否必须 Boolean ,默认值true |
挂在在vue原型链上的方法 $lm
有些函数需要挂载到原型链上，主要方便在dom中使用,当然在生命周期和方法中也可以使用。这部分方法统一挂在到$lm下
| 函数名 | 说明 | 参数说明 |
|---|---|---|
| dateRangeDisabled | 日期范围内不可见设置 | 接收三个参数，(time, range, config) ，time是时间组件返回的时间 Date；range是时间范围值，由开始时间和结束时间组成的一个数组 Array，第一个值是开始时间 String/Date/Number，第二个值是结束时间 String/Date/Number；config 配置信息,包含startEqual 开始日期是否可以相等 Boolean,endEqual 结束日期是否可以相等 Boolean |
使用示例：
首先在main.js中添加如下代码
import $lm from 'lm-ui-element/lib/utils/$lm'
Vue.use($lm)
使用
<template>
<el-form width="1000" ref="form" :model="form" label-width="100px">
<el-row>
<lm-date-time label="日期范围：" v-model="form.date" form-type="rangeDateTime" width="46%"
date-time-type="datetime"
:picker-options="[
{
disabledDate:(time)=>$lm.dateRangeDisabled(time,[0,form.date ? form.date[1] : new Date()],{endEqual:true})
},
{
disabledDate:time=> $lm.dateRangeDisabled(time,[form.date ? form.date[0] : 0,new Date()],{endEqual:true,startEqual:true})
}
]"
/>
</el-row>
</el-form>
</template>
<script>
export default {
data(){
return{
form:{},//表单
}
}
}
</script>
网友评论