详细问题描述
问题一 : 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
});
});
},
0 个回复