网站设计流程是,网站设计页面如何做居中,网络规划,网址申请注册在Vue中的项目#xff0c;基于VUX-UI开发#xff0c;一个常见的需求#xff1a;1、金额输入框2、弹出数字键盘3、仅支持输入两位小数#xff0c;限制最大11位数#xff0c;不允许0开头第一#xff0c;首先想到额就是在VUX-UI中制定typenumber。--不可行VUX中的文档和代码…在Vue中的项目基于VUX-UI开发一个常见的需求1、金额输入框2、弹出数字键盘3、仅支持输入两位小数限制最大11位数不允许0开头第一首先想到额就是在VUX-UI中制定typenumber。--不可行VUX中的文档和代码说明typenumber不支持maxLength会报错而且没有正则替换的处理或者钩子函数只有输入后提示校验信息。第二基于VUX中XInput封装有如下问题1)两层v-model正则替换的值不会触发input框渲染解决currentValue赋值为foramttedValue放入setTimeout(func ,0)中让input框先渲染为正则替换前的值再渲染为替换后的值currentValue(val, oldVal) {//调用filter过滤数据let formattedValue this.filter(val);if (this.type ‘number‘) {formattedValue this.typeNumberFilter(formattedValue, oldVal);}if (val ! formattedValue || val ‘‘) {setTimeout((){this.currentValue formattedValue;},0);}this.$emit(‘input‘, formattedValue);},View Code2)数字键盘input typenumber会导致maxlength失效无法限制长度解决用slice(0, max)处理if (formattedValue.length this.max) {formattedValue formattedValue.slice(0, this.max);}View Code3)数字键盘input typenumber 连续输入小数点...导致实际值和显示值不一致解决用原生的 inputElement.value oldValue处理const inputEle this.$children[0].$refs.input;//TODO: 待大范围验证处理连续输入..后typenumber的input框会把值修改为‘‘的问题fastclick导致typenumber报错//问题描述 1.00. 不会触发值改变1.00.不会触发值改变1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下//1、当校验后是空值(因inputnumberformattedValue为‘‘表明 原始newVal也为‘‘)//2、输入框拿到的是空值(因inputnumber导致输入框立即被赋予空值。点击清除按钮时这里input输入框还是上次的值)//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时oldVal.length 1)if (formattedValue ‘‘ inputEle.value ‘‘ oldVal oldVal.match(/^(\d)[\d.]/)) {formattedValueoldVal;}setTimeout((){inputEle.valueformattedValue;},0);View Code4)IOS中数字键盘有%$*等特殊字符解决用原生的 inputElement.onkeydown监听事件非数字和退格和小数点直接return事件mounted() {if (this.type ‘number‘) {const inputEle this.$refs.xinput.$refs.input;//eslint-disable-next-lineinputEle.onkeydown (e) {const keyCodee.keyCode;if (!this.isBackspace(keyCode) !this.isDot(keyCode) !this.isNumber(keyCode)) {//其他按键e.preventDefault();e.stopPropagation();return false;}};}}View Code第三其他说明为什么不用 typeteltypetel在ios中没有小数点第四全部代码:titletitle:maxcurrentMax:mincurrentMin:typetypev-modelcurrentValueon-focusonFoucus()on-bluronBlur():show-clearshowClear:placeholderplaceholderrefxinputdata() {return{currentValue:this.value,};},computed: {currentMax() {return (this.type ‘number‘) ? undefined : this.max;},currentMin() {return (this.type ‘number‘) ? undefined : this.min;}},props: {title: String,max: Number,min: Number,type: String,showClear: {type: Boolean,default: true,},placeholder: String,value: [String, Number],filter: {type: Function,default: (value) {let formattedValue ‘‘;const match value.match(/^([1-9]\d*(\.[\d]{0,2})?|0(\.[\d]{0,2})?)[\d.]*/);if(match) {formattedValue match[1];}returnformattedValue;},}},watch: {currentValue(val, oldVal) {//调用filter过滤数据let formattedValue this.filter(val);if (this.type ‘number‘) {formattedValue this.typeNumberFilter(formattedValue, oldVal);}if (val ! formattedValue || val ‘‘) {setTimeout((){this.currentValue formattedValue;},0);}this.$emit(‘input‘, formattedValue);},value(value) {this.currentValue value;},},methods: {onFoucus() {this.$emit(‘on-focus‘);},onBlur() {this.$emit(‘on-blur‘);},typeNumberFilter(val, oldVal) {const inputEle this.$refs.xinput.$refs.input;let formattedValueval;//由于typenumber不支持maxLength用slice模拟if (formattedValue.length this.max) {formattedValue formattedValue.slice(0, this.max);}//TODO: 待大范围验证处理连续输入..后typenumber的input框会把值修改为‘‘的问题fastclick导致typenumber报错//问题描述 1.00. 不会触发值改变1.00.不会触发值改变1.00.【\d\.】都会把值修改为空字符串‘‘。hack处理的条件说明如下//1、当校验后是空值(因inputnumberformattedValue为‘‘表明 原始newVal也为‘‘)//2、输入框拿到的是空值(因inputnumber导致输入框立即被赋予空值。点击清除按钮时这里input输入框还是上次的值)//3、上次输入大于两位(避免最后一位无法删除的问题。最后一位删除时oldVal.length 1)if (formattedValue ‘‘ inputEle.value ‘‘ oldVal oldVal.match(/^(\d)[\d.]/)) {formattedValueoldVal;}setTimeout((){inputEle.valueformattedValue;},0);returnformattedValue;},isBackspace(keyCode) {return keyCode 8;},isDot(keyCode) {return keyCode 46 || keyCode 110 || keyCode 190;},isNumber(keyCode) {return (keyCode 48 keyCode 57) || (keyCode 96 keyCode 105);},},mounted() {if (this.type ‘number‘) {const inputEle this.$refs.xinput.$refs.input;//eslint-disable-next-lineinputEle.onkeydown (e) {const keyCodee.keyCode;if (!this.isBackspace(keyCode) !this.isDot(keyCode) !this.isNumber(keyCode)) {//其他按键e.preventDefault();e.stopPropagation();return false;}};}}};View Code
