CFee
CFee
  • 发布:2016-05-13 08:55
  • 更新:2016-05-13 08:55
  • 阅读:1317

【报Bug】Numbox组件不支持小数,且执行顺序有误

分类:MUI

详细问题描述
问题一 : mui.js Numbox组件进行值相关操作时使用了parseInt,所以不支持小数.
问题二 : +-按钮的disabled并不靠谱.因为numbox的执行逻辑是先操作再验证,这就导致当值触碰到上下边界时(min,max),实际上会操作两次数值.(先执行+-,再验证值是否超出边界并纠正).
并且只有第一次改变数值的时候会触发chagne事件,第二次checkValue纠正数值的时候并没有触发change事件.
再并且input type为number,加上parseInt,所以只可以显示数字,如果需要显示如"2小时"之类的文字,不能简单将type number修改为text.需要自己弄个dom来通过绑定input的change事件达到效果.
由于边界操作时的两次操作只有第一次会触发change,所以就会造成显示和实际value不一致的结果.

问题一重现步骤
[步骤]numbox设定步长为小数,点击+-按钮
[结果]点击+-按钮无反应
[期望]按步长正确设定值

问题二重现步骤
[步骤]numbox设定min=5,max=10,step=1,并且给input绑定change事件console.log(value).不停点击-按钮
[结果]console会显示最小值为4,而页面上input value实际上是5
[期望]console和input value都等于5

运行环境
[mui版本]v3.0.0

联系方式
[QQ]8040701

[写给同行]
考虑到日后维护成本,不修改mui.js的情况下,目前最适宜的修复方式是将mui.js里numbox代码块copy出来重写.将所有parseInt改为parseFloat.
问题二解决方法1:change事件里加个定时器延迟执行相关操作,定时时间可以不填.
mui.later(function (){
// do something
})
问题二解决方法2:调整checkValue方法调用顺序,将numbox js代码块按如下修改.
修改前

/**  
 * 初始化事件绑定  
 **/  
initEvent: function() {  
    var self = this;  
    self.plus.addEventListener(tapEventName, function(event) {  
        var val = parseFloat(self.input.value) + self.options.step;  
        self.input.value = val.toString();  
        $.trigger(self.input, changeEventName, null);  
    });  
    self.minus.addEventListener(tapEventName, function(event) {  
        var val = parseFloat(self.input.value) - self.options.step;  
        self.input.value = val.toString();  
        $.trigger(self.input, changeEventName, null);  
    });  
    self.input.addEventListener(changeEventName, function(event) {  
        self.checkValue();  
        var val = parseFloat(self.input.value);  
        //触发顶层容器  
        $.trigger(self.holder, changeEventName, {  
            value: val  
        });  
    });  
},

修改后

/**  
 * 初始化事件绑定  
 **/  
initEvent: function() {  
    var self = this;  
    self.plus.addEventListener(tapEventName, function(event) {  
        var val = parseFloat(self.input.value) + self.options.step;  
        self.input.value = val.toString();  
        self.checkValue();  
        $.trigger(self.input, changeEventName, null);  
    });  
    self.minus.addEventListener(tapEventName, function(event) {  
        var val = parseFloat(self.input.value) - self.options.step;  
        self.input.value = val.toString();  
        self.checkValue();  
        $.trigger(self.input, changeEventName, null);  
    });  
    self.input.addEventListener(changeEventName, function(event) {  
        var val = parseFloat(self.input.value);  
        //触发顶层容器  
        $.trigger(self.holder, changeEventName, {  
            value: val  
        });  
    });  
},
2016-05-13 08:55 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复