广州网站设计成功刻,房地产网站建设公司,模板网站优,做网站排行榜一、效果图 二、组件集成了以下功能
1、输入金额--支持千分号显示、可设置decimalLimit来调整小数点位数
2、金额鼠标移入提示中文--标签添加isTip开启中文提示则不允许开启千分号显示showThousands
3、输入手机号--设置inputTypephone
4、输入整数---设置inputTypeinteger
5、…一、效果图 二、组件集成了以下功能
1、输入金额--支持千分号显示、可设置decimalLimit来调整小数点位数
2、金额鼠标移入提示中文--标签添加isTip开启中文提示则不允许开启千分号显示showThousands
3、输入手机号--设置inputTypephone
4、输入整数---设置inputTypeinteger
5、输入数字含小数点---设置inputTypedecimal
6、输入身份证号---设置inputTypeidCard
7、格式化输入内容--在 formatter的情况下显示值我们通常同时使用 parser
8、支持el-input的所有功能三、参数配置
1、代码示例
t-input v-modelinputVlaue /2、配置参数Attributes继承 el-input Attributes
参数说明类型默认值v-model绑定值string-placeholderplaceholder提示语string‘请输入’decimalLimit小数点位数 (小数、金额类型时生效)Number2appendTitle插槽append显示文案(金额类型时生效)string‘元’showThousands是否显示千分号(小数、金额类型时生效)BooleanfalseisTip是否提示金额中文(金额类型时生效)BooleanfalseinputType特性类型标注(文字:text,金额:amount,电话:phone,整数:integer,小数:decimal,身份证:idCard’)stringtext
3、继承 el-input 事件、插槽、方法
四、源码
templateel-tooltip effectdark placementbottom-start v-ifisTip !showThousandstemplate #content{{ currencyFilter(modelValue) }}br /{{ digitUppercase(modelValue) }}/templateel-inputv-modelinternalValuev-bind{ placeholder, clearable: true, ...$attrs }blurhandleBlurtemplate v-for(index, name) in slots v-slot:[name]dataslot :namename v-binddata //templatetemplate #append v-if$slots.append || inputType amountspan v-ifinputType amount{{ appendTitle }}/spanslot v-else nameappend //template/el-input/el-tooltipel-inputv-modelinternalValuev-bind{ placeholder, clearable: true, ...$attrs }blurhandleBlurv-elsetemplate v-for(index, name) in slots v-slot:[name]dataslot :namename v-binddata //templatetemplate #append v-if$slots.append || inputType amountspan v-ifinputType amount{{ appendTitle }}/spanslot v-else nameappend //template/el-input
/templatescript setup langts nameTInput
import { ElMessage } from element-plus
import { computed, useSlots } from vue
const props defineProps({modelValue: {type: [String, Number],default: },placeholder: {type: String,default: 请输入},// 小数、金额类型时小数点后最多几位decimalLimit: {type: Number,default: 2},// inputType含有文字:text、金额:amount、电话:phone、整数:integer、小数:decimal、身份证:idCard类型inputType: {type: String,default: text},appendTitle: {type: String,default: 元},// 是否显示千分号showThousands: {type: Boolean,default: false},// 是否显示金额中文提示isTip: {type: Boolean,default: false}
})
const emits defineEmits([update:modelValue])
const slots useSlots()
let internalValue computed({get() {return props.modelValue},set(val) {// console.log(777, val)emits(update:modelValue, val)}
})const handleBlur () {let formattedValue internalValue.valueconst formatValue (value, formatter) {if (formatter) {return formatter(value)}return value}switch (props.inputType) {case amount:case decimal:formattedValue formatValue(Number(internalValue.value), value formatAmount(value, props.decimalLimit))breakcase phone:formattedValue formatValue(internalValue.value.toString(), validatePhone)breakcase integer:formattedValue formatValue(internalValue.value.toString(), validateInteger)breakcase idCard:formattedValue formatValue(internalValue.value.toString(), validateIdCard)breakdefault:formattedValue internalValue.value}internalValue.value formattedValue
}// 手机号码校验
const validatePhone (value: string) {const phoneReg /^1[3456789]\d{9}$/if (phoneReg.test(value as string)) {return value} else {ElMessage.error(请输入正确的手机号码)return }
}
// 身份证号码校验
const validateIdCard (value: string) {const idCardReg /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/if (idCardReg.test(value as string)) {return value} else {ElMessage.error(请输入正确的身份证号码)return }
}
// 整数校验
const validateInteger (value: string) {const integerReg /^\d$/if (integerReg.test(value as string)) {return value} else {ElMessage.error(请输入正确的整数)return }
}
// 小数、金额类型转换
const formatAmount (value: number, decimalLimit: number) {if (!value) {ElMessage.error(请输入正确的${props.inputType amount ? 金额 : 数字})return }// 格式化千分号if (props.showThousands) {const val value.toFixed(decimalLimit).toString().replace(/\B(?(\d{3})(?!\d))/g, ,)return val} else {return value.toFixed(decimalLimit)}
}
/*** 数字金额格式过滤 10000 10,000.00* param {number} num 被转换数字* param {number} n 保留小数位*/
const currencyFilter (num: any, n: number 2) {const reg /((^[1-9]\d*)|^0)(\.\d)?$/if (!reg.test(num)) {return } else {n n 0 n 20 ? n : 2if (num || num 0) {num parseFloat((num ).replace(/^\d\.-/g, )).toFixed(n) const l num.split(.)[0].split().reverse()const r num.split(.)[1]let t for (let i 0; i l.length; i) {t l[i] ((i 1) % 3 0 i 1 ! l.length ? , : )}return num ? t.split().reverse().join() . r : } else {return }}
}
/*** 数字金额格式过滤(转汉字大写) 12000.34 壹万贰千叁角肆分* param {number} num 被转换数字*/
const digitUppercase (num: any) {const reg /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/if (!reg.test(num)) {return 请输入正确的金额格式} else {let fraction [角, 分]let digit [零, 壹, 贰, 叁, 肆, 伍, 陆, 柒, 捌, 玖]let unit [[元, 万, 亿, 兆],[, 拾, 佰, 仟]]let head num 0 ? 欠 : num Math.abs(num)let s fraction.forEach((item, index) {s (digit[Math.floor(num * 10 * Math.pow(10, index)) % 10] item).replace(/零./, )})s s || 整num Math.floor(num)for (let i 0; i unit[0].length num 0; i) {let p for (let j 0; j unit[1].length num 0; j) {p digit[num % 10] unit[1][j] pnum Math.floor(num / 10)}s p.replace(/(零.)*零$/, ).replace(/^$/, 零) unit[0][i] s}return (head s.replace(/(零.)*零元/, 元).replace(/(零.)/g, 零).replace(/^整$/, 零元整))}
}
/script
四、组件地址
gitHub组件地址
gitee码云组件地址
五、相关文章
基于ElementUiantdUi再次封装基础组件文档 vue3ts基于Element-plus再次封装基础组件文档
