weui.js将select變為weui.picker顯示

在weui的展示界面，有一個挺不錯的picker模拟select的示範，但是我讀了一遍weui.js的文檔，卻發現沒有将select轉為picker的這一過程封裝，是以隻好造了一個輪子，同時也上傳到了github:weui.js-select2Picker

(() => {
    if (!weui || !$)
        return;
    weui.select2Picker = {
        init: () => {
            weui.select2Picker.initSelectChange();
            weui.select2Picker.initPcikerClick();
        },
        // 給select控件注冊事件，改變時修改顯示的值
        initSelectChange: () => {
            const pickerDoms = $('[pickerfrom]');
            $.each(pickerDoms, (i, dom) => {
                const target = $(dom).attr('pickerfrom');
                $('body').on('change', target, (e) => {
                    const $this = $(e.target);
                    if ($this.val()) {
                        weui.select2Picker.setValue($(`[pickerfrom="${target}"]`), $this.find(':checked').text());
                    }
                });
            });
        },
        // 給顯示控件注冊點選事件，點選時生成picker的options，如果控件存在pickerdisabled類，則停止工作
        initPcikerClick: () => {
            $('[pickerfrom]').on('click', (e) => {
                if ($(e.target).hasClass('pickerdisabled')) {
                    return;
                }
                const dom = $(e.target).attr('pickerfrom');
                let values = weui.select2Picker.initPickerOptions(dom);
                values = weui.select2Picker.uniqueOptions(values);
                weui.select2Picker.showPicker(dom, values);
            });
        },
        // 顯示picker
        showPicker: (dom, items, options) => {
            weui.picker(items, $.extend({
                id: new Date().valueOf(),
                defaultValue: weui.select2Picker.getSelectValue(dom),
                onConfirm: function (result) {
                    const val = result[result.length - 1].value;
                    weui.select2Picker.setValue(dom, val);
                }
            }, options));
        },
        // picker的items去重
        uniqueOptions: values => {
            const newArr = [];
            values.forEach(x => {
                const exists = newArr.find(y => { return y.value == x.value });
                if (exists) {
                    if (x.children && x.children.length > 0) {
                        if (!exists.children) {
                            exists.children = [];
                        }
                        x.children.forEach(child => {
                            exists.children.push(child);
                        });
                    }
                } else {
                    newArr.push(x);
                }
            });
            return newArr;
        },
        // 建立pickeritems，如果存在optgroup則生成兩級item
        initPickerOptions: dom => {
            const $select = $(dom);
            let pickerOptions = [];
            if ($select.find('optgroup').length > 0) {
                const $optgroup = $select.find('optgroup');
                $.each($optgroup, (i, $group) => {
                    const $option = $($group).find('option:first');
                    if ($option.attr('label')) {
                        pickerOptions.push({
                            value: $($group).attr('label'),
                            label: $($group).attr('label'),
                            disabled: $($group).prop('disabled'),
                            children: weui.select2Picker.option2Picker($group)
                        });
                    }
                });
            } else {
                pickerOptions = weui.select2Picker.option2Picker($select);
            }
            return pickerOptions;
        },
        // 将option生成為item，如果有disabled則設定對應屬性
        option2Picker: parent => {
            const $option = $(parent).find('option');
            const hadArr = [];
            $.each($option, (i, $opt) => {
                if ($($opt).val()) {
                    hadArr.push({
                        value: $($opt).val(),
                        label: $($opt).text(),
                        disabled: $($opt).prop('disabled')
                    });
                }
            });
            return hadArr;
        },
        // 擷取select目前的值，用作picker的預設值
        getSelectValue: dom => {
            const $this = $(dom);
            const val = $this.val();
            const choose = [];
            if (!val) {
                return choose;
            }
            if ($this.find(':checked').parent().attr('label')) {
                choose.push($this.find(':checked').parent().attr('label'));
            }
            choose.push(val);
            return choose;
        },
        // 給select指派并且觸發change事件
        setValue: (target, val) => {
            const $dom = $(target);
            if ($dom.is('select') || $dom.is('input')) {
                $dom.val(val);
            } else {
                $dom.text(val);
            }
            $dom.trigger("change");
        }
    }
})();
           

在需要顯示文字的控件部配置設定置pcikerfrom指定select，然後直接調用weui.select2pciker.init()方法即可。