慈溪市住房和城乡建设局网站,网站建设自学多长时间,网站权重数据包,深圳公司注册核名官网需求#xff1a;想要实现一个输入金额的el-input#xff0c;限制只能输入数字和一个小数点。失焦数字转千分位#xff0c;聚焦转为数字#xff0c;超过最大值#xff0c;红字提示 效果图
失焦 聚焦 报错效果 // 组件limitDialog
templateel-dialog:visible.s… 需求想要实现一个输入金额的el-input限制只能输入数字和一个小数点。失焦数字转千分位聚焦转为数字超过最大值红字提示 效果图
失焦 聚焦 报错效果 // 组件limitDialog
templateel-dialog:visible.syncisVisibletitle修改限额width420px:before-closecancelel-form :modelformVal refruleForm sizesmallel-form-itemlabel单次交易限额propsingle_limit:rules[{required: true,message: 请输入单次交易限额,trigger: change,},{ validator: singleRule, trigger: change },]el-inputv-modelformVal.single_limitv-thousandmaxlength10typetextkeypress.nativerestrictInput(single_limit, $event)blurformatOnBlur(single_limit, $event)template slotsuffix{{ otherInfo.currency }}/template/el-input/el-form-itemel-form-itemlabel每日限额propdaily_limit:rules[{required: true,message: 请输入每日限额,trigger: change,},{ validator: dailyRule, trigger: change },]el-inputv-modelformVal.daily_limitmaxlength10v-thousandtypetextkeypress.nativerestrictInput(daily_limit, $event)blurformatOnBlur(daily_limit, $event)template slotsuffix{{ otherInfo.currency }}/template/el-inputp classtip v-iftype ! bath当日已用金额 {{ otherInfo.daily_used }}{{ otherInfo.currency }}/p/el-form-itemel-form-itemlabel每月限额propmonthly_limit:rules[{required: true,message: 请输入每月限额,trigger: change,},{ validator: monthlyRule, trigger: change },]el-inputv-modelformVal.monthly_limitmaxlength10v-thousandtypetextkeypress.nativerestrictInput(monthly_limit, $event)blurformatOnBlur(monthly_limit, $event)template slotsuffix{{ otherInfo.currency }}/template/el-inputp classtip v-iftype ! bath当月已用金额 {{ otherInfo.monthly_used }}{{ otherInfo.currency }}/p/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickcancel sizesmall取 消/el-buttonel-buttontypeprimaryclickhandleSavesizesmall:loadingisSumbitLoading确 定/el-button/div/el-dialog
/templatescript
import { updateCardLimitApi } from /services/api/cardManage.js;
import { updateObject } from /utils/common;
export default {data() {return {isVisible: false,isSumbitLoading: false,formVal: {single_limit: ,daily_limit: ,monthly_limit: ,id: ,},otherInfo: {currency: USD,daily_used: ,monthly_used: ,},type: bath,};},props: {selectedList: {type: Array,default: () [],},},methods: {singleRule(rule, value, callback) {const numValue Number(value);if (numValue 10000) {callback(new Error(输入金额不可超过单次限额(10,000.00 ${this.otherInfo.currency})));}this.checkLimit(value, callback);},dailyRule(rule, value, callback) {const numValue Number(value);if (numValue 100000) {callback(new Error(输入金额不可超过每日限额(100,000.00 ${this.otherInfo.currency})));}this.checkLimit(value, callback);},monthlyRule(rule, value, callback) {const numValue Number(value);if (numValue 500000) {callback(new Error(输入金额不可超过每月限额(500,000.00 ${this.otherInfo.currency})));}this.checkLimit(value, callback);},checkLimit(value, callback) {const strValue String(value || );if (strValue )return callback(new Error(请输入单次交易限额));if (strValue.endsWith(.))return callback(new Error(不能以小数点结尾));const numValue Number(strValue);if (isNaN(numValue)) return callback(new Error(请输入有效的数字));if (strValue.includes(.) strValue.split(.)[1].length 2) {return callback(new Error(小数点后最多两位));}callback();},restrictInput(formKey, event) {const key event.key;const value String(this.formVal[formKey] || );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);}},init(info, type) {this.isVisible true;this.type type;updateObject(this.formVal, info);updateObject(this.otherInfo, info);},handleSave() {this.isSubmitLoading true;this.$refs.ruleForm.validate(async (valid) {if (valid) {const { code } await updateCardLimitApi({...this.formVal,id:this.type bath? this.selectedList.map((item) item.id): [this.formVal.id],});if (code 0) {this.$message.success(修改成功);this.cancel();this.$emit(reload);}}this.isSumbitLoading false;});},cancel() {this.isVisible false;this.$refs.ruleForm.resetFields();updateObject(this.formVal, {single_limit: ,daily_limit: ,monthly_limit: ,id: ,});this.otherInfo.currency USD;},},
};
/scriptstyle langscss scoped
.dialog-footer {text-align: right;
}
.tip {color: #999999;font-size: 12px;
}
/style
