龙马UI lm-ui-element 公用函数方法 lm-methods、基于element-ui的表单校验方法lm-validate-methods、挂在在vue原型链上的方法 $lm

lm-ui-element 快速上手——安装使用

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)

使用




你可能感兴趣的:(龙马UI lm-ui-element 公用函数方法 lm-methods、基于element-ui的表单校验方法lm-validate-methods、挂在在vue原型链上的方法 $lm)