当前位置：首页 > wzjs >正文

官方网站建设银行2010年存款利息建设工程信息化考试报名网站

wzjs 2025/9/23 9:34:42

官方网站建设银行2010年存款利息,建设工程信息化考试报名网站,陕西省建设厅网站安全员报名,网站前台的实现问题开发的时候经常会遇到需要在输入框中输入数字转为千分位，点击填写时又转为数字的情况解决因此直接在vue中注入自定义指令，通过使用自定义指令达到效果；限制input输入框只能输入数字和一位小鼠带你自定义指令-千分位 // 自定义指令-千…

问题

开发的时候经常会遇到需要在输入框中输入数字转为千分位，点击填写时又转为数字的情况

解决

因此直接在vue中注入自定义指令，通过使用自定义指令达到效果；限制input输入框只能输入数字和一位小鼠带你

自定义指令-千分位

// 自定义指令-千分位
Vue.directive("thousand", {inserted(el, binding, vnode) {// console.log("el", el, binding, vnode);// 获取input节点if (el.tagName.toLocaleUpperCase() !== "INPUT") {el = el.getElementsByTagName("input")[0];}if (!el || !el.value) return;// 初始化时，格式化值为千分位const numberValue = parseFloat(el.value.replace(/,/g, ""));if (!isNaN(numberValue)) {el.value = numberValue.toLocaleString("zh", {minimumFractionDigits: 2,maximumFractionDigits: 2,});}// 聚焦时转化为数字格式（去除千分位）el.onfocus = () => {el.value = parseFloat(el.value.replace(/,/g, "")).toFixed(2);};// 失去焦点时转化为千分位el.onblur = () => {console.log('aaa',el.value)const onBlurValue = parseFloat(el.value.replace(/,/g, ""));if (!isNaN(onBlurValue)) {el.value = onBlurValue.toLocaleString("zh", {minimumFractionDigits: 2,maximumFractionDigits: 2,});}};},
});

限制el-input只能输入，并且加上千分位指令

   <el-inputv-thousandv-model="daily_limit"maxlength="10"type="text"@keypress="restrictInput"@blur="formatOnBlur"></el-input><script>
export default {data(){retrun {daily_limit:''}},
methods：{restrictInput(event) {const key = event.key;const value = String(this.daily_limit || "");if (event.ctrlKey || event.altKey || key.length > 1) return;// 只允许数字和小数点，限制多个小数点const isValidKey = /[0-9.]/.test(key);const hasDecimal = value.includes(".");if (!isValidKey || (key === "." && hasDecimal)) {event.preventDefault();return;}},formatOnBlur(formKey) {const strValue = String(this.formVal[formKey] || "");if (strValue && !isNaN(Number(strValue))) {this.formVal[formKey] = Number(strValue).toFixed(2);}},}
}
</script>