一、效果圖

二、組件集成了以下功能

1、輸入金額--支持千分號顯示、可設(shè)置`decimalLimit`來調(diào)整小數(shù)點位數(shù)
2、金額鼠標(biāo)移入提示中文--標(biāo)簽添加`isTip`開啟中文提示則不允許開啟千分號顯示`showThousands`
3、輸入手機號--設(shè)置`inputType=phone`
4、輸入整數(shù)---設(shè)置`inputType=integer`
5、輸入數(shù)字（含小數(shù)點）---設(shè)置`inputType=decimal`
6、輸入身份證號---設(shè)置`inputType=idCard`
7、格式化輸入內(nèi)容--在 `formatter`的情況下顯示值，我們通常同時使用 `parser`
8、支持el-input的所有功能

三、參數(shù)配置

1、代碼示例：

<t-input v-model="inputVlaue" />

2、配置參數(shù)（Attributes）繼承 el-input Attributes

參數(shù)	說明	類型	默認值
v-model	綁定值	string	-
placeholder	placeholder提示語	string	‘請輸入’
decimalLimit	小數(shù)點位數(shù) (小數(shù)、金額類型時生效)	Number	2
appendTitle	插槽append顯示文案(金額類型時生效)	string	‘元’
showThousands	是否顯示千分號(小數(shù)、金額類型時生效)	Boolean	false
isTip	是否提示金額中文(金額類型時生效)	Boolean	false
inputType	特性類型標(biāo)注(文字:text,金額:amount,電話:phone,整數(shù):integer,小數(shù):decimal,身份證:idCard’)	string	text

3、繼承 el-input 事件、插槽、方法

四、源碼

<template><el-tooltip effect="dark" placement="bottom-start" v-if="isTip && !showThousands"><template #content>{{ currencyFilter(modelValue) }}<br />{{ digitUppercase(modelValue) }}</template><el-inputv-model="internalValue"v-bind="{ placeholder, clearable: true, ...$attrs }"@blur="handleBlur"><template v-for="(index, name) in slots" v-slot:[name]="data"><slot :name="name" v-bind="data" /></template><template #append v-if="$slots.append || inputType === 'amount'"><span v-if="inputType === 'amount'">{{ appendTitle }}</span><slot v-else name="append" /></template></el-input></el-tooltip><el-inputv-model="internalValue"v-bind="{ placeholder, clearable: true, ...$attrs }"@blur="handleBlur"v-else><template v-for="(index, name) in slots" v-slot:[name]="data"><slot :name="name" v-bind="data" /></template><template #append v-if="$slots.append || inputType === 'amount'"><span v-if="inputType === 'amount'">{{ appendTitle }}</span><slot v-else name="append" /></template></el-input>
</template><script setup lang="ts" name="TInput">
import { ElMessage } from "element-plus"
import { computed, useSlots } from "vue"
const props = defineProps({modelValue: {type: [String, Number],default: ""},placeholder: {type: String,default: "請輸入"},// 小數(shù)、金額類型時，小數(shù)點后最多幾位decimalLimit: {type: Number,default: 2},// inputType含有文字:text、金額:amount、電話:phone、整數(shù):integer、小數(shù):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 ""}
}
// 整數(shù)校驗
const validateInteger = (value: string) => {const integerReg = /^\d+$/if (integerReg.test(value as string)) {return value} else {ElMessage.error("請輸入正確的整數(shù)")return ""}
}
// 小數(shù)、金額類型轉(zhuǎn)換
const formatAmount = (value: number, decimalLimit: number) => {if (!value) {ElMessage.error(`請輸入正確的${props.inputType == "amount" ? "金額" : "數(shù)字"}`)return ""}// 格式化千分號if (props.showThousands) {const val = value.toFixed(decimalLimit).toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")return val} else {return value.toFixed(decimalLimit)}
}
/*** 數(shù)字金額格式過濾 10000 => "￥10,000.00"* @param {number} num 被轉(zhuǎn)換數(shù)字* @param {number} n 保留小數(shù)位*/
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 ""}}
}
/*** 數(shù)字金額格式過濾(轉(zhuǎn)漢字大寫) 12000.34 => "壹萬貳千叁角肆分"* @param {number} num 被轉(zhuǎn)換數(shù)字*/
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碼云組件地址

五、相關(guān)文章

基于ElementUi&antdUi再次封裝基礎(chǔ)組件文檔

---

vue3+ts基于Element-plus再次封裝基礎(chǔ)組件文檔