基于mui.PopPicker的可多选下拉多选的底部弹出组件

在开发过程中总能遇到一些似曾相识又新鲜的玩意儿，此次要介绍的内容是在开发移动app过程中基于mui的PopPicker进行改造的一个支持多选操作的底部弹出列表组件，话不多说，具体代码如下：

首先将原生的 mui.picker.js 进行备份的改名为 mui.picker2.js ，并对其中的 Picker.prototype.setItems 方法进行修改，如下：

Picker.prototype.setItems = function(items) {
        var self = this;
        self.items = items || [];
        var buffer = [];
        self.items.forEach(function(item) {
            if (item !== null && item !== undefined) {
                buffer.push('<li>');
                buffer.push('<div class="mui-input-row mui-checkbox mui-left">');
                buffer.push('<label>' + (item.text || item) + '</label>');
                buffer.push('<input name="pickerCheckbox" value="' + (item.value || item) + '" type="checkbox">');
                buffer.push('</div>');
                buffer.push('</li>');
                // buffer.push('<li>' + (item.text || item) + '</li>');
            }
        });
        self.list.innerHTML = buffer.join('');
        self.findElementItems();
        self.calcElementItemPostion();
        self.setAngle(self.correctAngle(self.list.angle));
        self.triggerChange(true);
    };

在html页面中引入修改后的js文件，并对PopPicker进行初始化和监听，如下：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>基于mui.PopPicker的可多选的底部弹出组件</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="../css/mui.min.css" rel="stylesheet" />
        <link href="../css/mui.picker.min.css" rel="stylesheet" />
    </head>

    <body>
        <header class="mui-bar mui-bar-nav" style="background: #ffffff; box-shadow: none;">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">基于mui.PopPicker的可多选的底部弹出组件</h1>
        </header>
        <div class="mui-content">
            <a id="popPicker" href="javascript:void(0);" class="mui-btn mui-btn-outlined" 
            style="margin: 30px 30%;">mui.custom.PopPicker</a>
        </div>
    </body>
    
    <script src="../../js/mui.min.js"></script>
    <script src="../../js/mui.picker2.js"></script>
    <script src="../../js/mui.poppicker.js"></script>
    
    <script type="text/javascript">
        var pickerData = [
            {'value': 'v1', 'text': '测试1'},
            {'value': 'v2', 'text': '测试2'},
            {'value': 'v3', 'text': '测试3'},
            {'value': 'v5', 'text': '测试5'},
            {'value': 'v6', 'text': '测试6'},
            {'value': 'v7', 'text': '测试7'},
        ]
        mui.init();
        
        (function(doc) {
            // 初始化picker
            var picker = new mui.PopPicker();
            picker.setData(pickerData)
            
            mui('.mui-pciker-rule.mui-pciker-rule-ft')[0].style.display = 'none';
            
            document.getElementById('popPicker').addEventListener('tap', function() {
                picker.show(function() {
                    var vals = []
                    // 获取复选框选中的值
                    mui.each(document.querySelectorAll('input[name=pickerCheckbox]'), function(i, ele) {
                        if (ele.checked) {
                            vals[i] = ele.value
                        }
                    })
                    if (!vals || vals.length <= 0) {
                        mui.toast('请选择')
                        return false; // return false  可阻止弹出层关闭
                    }
                    alert('vals -> ' + vals.join("--"));
                })
            }, false)
        }(document));
    </script>
</html>