基於mui.PopPicker的可多選下拉多選的底部彈出元件

阿新 • • 發佈：2021-06-23

在開發過程中總能遇到一些似曾相識又新鮮的玩意兒，此次要介紹的內容是在開發移動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>