凌云阁
凌云阁
  • 发布:2023-05-07 10:19
  • 更新:2023-05-08 10:59
  • 阅读:271

【报Bug】uni-number-box组件

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 3.7.11

手机系统: Android

手机系统版本号: Android 12

手机厂商: 华为

手机机型: 苹果

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

vue3直接修改数字框 不能正确更新val值

预期结果:

更新val

实际结果:

不更新

bug描述:

change事件必须放到input事件之后,否则可能出现change事件被调用但是绑定的数据没有更新的问题;
_onBlur哪里没有兼容VUE3的事件,估计是写漏了,事件触发顺序也是反的!
建议:增加type属性,键盘输入支持小数点,目前写死了number类型,无法输入小数点

// TODO vue3 兼容  
this.$emit("update:modelValue", +this.inputValue);
_calcValue(type) {  
                if (this.disabled) {  
                    return;  
                }  
                const scale = this._getDecimalScale();  
                let value = this.inputValue * scale;  
                let step = this.step * scale;  
                if (type === "minus") {  
                    value -= step;  
                    if (value < (this.min * scale)) {  
                        return;  
                    }  
                    if (value > (this.max * scale)) {  
                        value = this.max * scale  
                    }  
                }  

                if (type === "plus") {  
                    value += step;  
                    if (value > (this.max * scale)) {  
                        return;  
                    }  
                    if (value < (this.min * scale)) {  
                        value = this.min * scale  
                    }  
                }  

                this.inputValue = (value / scale).toFixed(String(scale).length - 1);  
                this.$emit("change", +this.inputValue);  
                // TODO vue2 兼容  
                this.$emit("input", +this.inputValue);  
                // TODO vue3 兼容  
                this.$emit("update:modelValue", +this.inputValue);  
            },  
            _getDecimalScale() {  

                let scale = 1;  
                // 浮点型  
                if (~~this.step !== this.step) {  
                    scale = Math.pow(10, String(this.step).split(".")[1].length);  
                }  
                return scale;  
            },  
            _onBlur(event) {  
                this.$emit('blur', event)  
                let value = event.detail.value;  
                if (!value) {  
                    // this.inputValue = 0;  
                    return;  
                }  
                value = +value;  
                if (value > this.max) {  
                    value = this.max;  
                } else if (value < this.min) {  
                    value = this.min;  
                }  
                const scale = this._getDecimalScale();  
                this.inputValue = value.toFixed(String(scale).length - 1);  
                this.$emit("change", +this.inputValue);  
                this.$emit("input", +this.inputValue);  
            }  

附修改后的代码:

_calcValue(type) {  
                if (this.disabled) {  
                    return;  
                }  
                const scale = this._getDecimalScale();  
                let value = this.inputValue * scale;  
                let step = this.step * scale;  
                if (type === "minus") {  
                    value -= step;  
                    if (value < (this.min * scale)) {  
                        return;  
                    }  
                    if (value > (this.max * scale)) {  
                        value = this.max * scale  
                    }  
                }  

                if (type === "plus") {  
                    value += step;  
                    if (value > (this.max * scale)) {  
                        return;  
                    }  
                    if (value < (this.min * scale)) {  
                        value = this.min * scale  
                    }  
                }  

                this.inputValue = (value / scale).toFixed(String(scale).length - 1);  
                // TODO vue2 兼容  
                this.$emit("input", +this.inputValue);  
                // TODO vue3 兼容  
                this.$emit("update:modelValue", +this.inputValue);  
                this.$emit("change", +this.inputValue);  
            },  
            _getDecimalScale() {  

                let scale = 1;  
                // 浮点型  
                if (~~this.step !== this.step) {  
                    scale = Math.pow(10, String(this.step).split(".")[1].length);  
                }  
                return scale;  
            },  
            _onBlur(event) {  
                this.$emit('blur', event)  
                let value = event.detail.value;  
                if (!value) {  
                    // this.inputValue = 0;  
                    return;  
                }  
                value = +value;  
                if (value > this.max) {  
                    value = this.max;  
                } else if (value < this.min) {  
                    value = this.min;  
                }  
                const scale = this._getDecimalScale();  
                this.inputValue = value.toFixed(String(scale).length - 1);  
                // TODO vue2 兼容  
                this.$emit("input", +this.inputValue);  
                // TODO vue3 兼容  
                this.$emit("update:modelValue", +this.inputValue);  
                this.$emit("change", +this.inputValue);  
            },  
            _onFocus(event) {  
                this.$emit('focus', event)  
            }
2023-05-07 10:19 负责人:无 分享
已邀请:
YUANRJ

YUANRJ

感谢反馈,后续会考虑支持,以后有更好的建议欢迎给我们提pr。

YUANRJ

YUANRJ

要回复问题请先登录注册