【报Bug】uni-number-box组件

分类：uni-app

bug已修复

产品分类： 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 负责人:无分享

2 个回复

YUANRJ

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

YUANRJ

bug 已修复，升级下版本 https://ext.dcloud.net.cn/plugin?id=31#detail

要回复问题请先登录或注册

【报Bug】uni-number-box组件

操作步骤：

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

预期结果：

更新val

实际结果：

不更新

bug描述：

2 个回复

公告

相关问题

【报Bug】uni-number-box组件

操作步骤： vue3直接修改数字框 不能正确更新val值

预期结果： 更新val

实际结果： 不更新

bug描述：

与内容相关的链接

2 个回复

公告

相关问题

操作步骤：

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

预期结果：

更新val

实际结果：

不更新