freedemon
freedemon
  • 发布:2017-10-19 16:01
  • 更新:2017-10-19 16:01
  • 阅读:3577

关于MUI中NumberBox任意浮点数、整数加减的优化

分类:MUI

最近刚有个数字输入框浮点数输入、加减的需求。

查询社区只有http://ask.dcloud.net.cn/article/477这一篇文章的建议是替换源码中parseInt为parseFloat,

但觉得这个方法并不完全解决js中浮点数相加结果异常的问题。

于是对mui.js中的numberbox部分进行适当修改,实现任意浮点数、整数加减的需求。

代码如下,可直接复制粘贴到mui.js8024行处进行替换:

 (function($) {  

    var touchSupport = ('ontouchstart' in document);  
    var tapEventName = touchSupport ? 'tap' : 'click';  
    var changeEventName = 'change';  
    var holderClassName = 'mui-numbox';  
    var plusClassSelector = '.mui-btn-numbox-plus,.mui-numbox-btn-plus';  
    var minusClassSelector = '.mui-btn-numbox-minus,.mui-numbox-btn-minus';  
    var inputClassSelector = '.mui-input-numbox,.mui-numbox-input';  

    var Numbox = $.Numbox = $.Class.extend({  
        /**  
         * 构造函数  
         **/  
        init: function(holder, options) {  
            var self = this;  
            if (!holder) {  
                throw "构造 numbox 时缺少容器元素";  
            }  
            self.holder = holder;  
            options = options || {};  
            options.step = parseFloat(options.step || 1);  
            self.options = options;  
            self.input = $.qsa(inputClassSelector, self.holder)[0];  
            self.plus = $.qsa(plusClassSelector, self.holder)[0];  
            self.minus = $.qsa(minusClassSelector, self.holder)[0];  
            self.checkValue();  
            self.initEvent();  
        },  
        /**  
         * 初始化事件绑定  
         **/  
        initEvent: function() {  
            var self = this;  
            var add = function(arg1,arg2){  
                    var r1,r2,m,n;   
                try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                m=Math.pow(10,Math.max(r1,r2));  
                n=(r1>=r2)?r1:r2;  
                return ((arg1*m+arg2*m)/m).toFixed(n);    
            };  

            var sub = function(arg1,arg2){  
                 var r1,r2,m,n;   
                 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}   
                 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}   
                 m=Math.pow(10,Math.max(r1,r2));   
                 n=(r1>=r2)?r1:r2;   
                 return ((arg1*m-arg2*m)/m).toFixed(n);   
            };  

            self.plus.addEventListener(tapEventName, function(event) {  
                var val = add(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 = sub(parseFloat(self.input.value),self.options.step);  
                self.input.value = val.toString();  
                $.trigger(self.input, changeEventName, null);  
            });  
            self.input.addEventListener(changeEventName, function(event) {  
                var val = self.input.value;   
                self.checkValue();  
                //触发顶层容器  
                $.trigger(self.holder, changeEventName, {  
                    value: val  
                 });  
            });  
        },  
        /**  
         * 获取当前值  
         **/  
        getValue: function() {  
            var self = this;  
            return parseFloat(self.input.value);  
        },  
        /**  
         * 验证当前值是法合法  
         **/  
        checkValue: function() {  
            var self = this;  
            var val = self.input.value;  
            if (val == null || val == '' || isNaN(val)) {  
                self.input.value = self.options.min || 0;  
                self.minus.disabled = self.options.min != null;  
            } else {  
                var val = parseFloat(val);  
                if (self.options.max != null && !isNaN(self.options.max) && val >= parseFloat(self.options.max)) {  
                    val = self.options.max;  
                    self.plus.disabled = true;  
                } else {  
                    self.plus.disabled = false;  
                }  
                if (self.options.min != null && !isNaN(self.options.min) && val <= parseFloat(self.options.min)) {  
                    val = self.options.min;  
                    self.minus.disabled = true;  
                } else {  
                    self.minus.disabled = false;  
                }  
                self.input.value = val;  
            }  
        },  
        /**  
         * 更新选项  
         **/  
        setOption: function(name, value) {  
            var self = this;  
            self.options[name] = value;  
        },  
        /**  
         * 动态设置新值  
         **/  
        setValue: function(value) {  
            this.input.value = value;  
            this.checkValue();  
        }  
    });  

    $.fn.numbox = function(options) {  
        var instanceArray = [];  
        //遍历选择的元素  
        this.each(function(i, element) {  
            if (element.numbox) {  
                return;  
            }  
            if (options) {  
                element.numbox = new Numbox(element, options);  
            } else {  
                var optionsText = element.getAttribute('data-numbox-options');  
                var options = optionsText ? JSON.parse(optionsText) : {};  
                options.step = element.getAttribute('data-numbox-step') || options.step;  
                options.min = element.getAttribute('data-numbox-min') || options.min;  
                options.max = element.getAttribute('data-numbox-max') || options.max;  
                element.numbox = new Numbox(element, options);  
            }  
        });  
        return this[0] ? this[0].numbox : null;  
    }  

    //自动处理 class='mui-locker' 的 dom  
    $.ready(function() {  
        $('.' + holderClassName).numbox();  
    });  

}(mui));
1 关注 分享
skysowe

要回复文章请先登录注册