mui下拉框picker选择器

经常做pc端的下拉框（图一），所以在做手机端下拉框的时候发现很少有图一样式的，然后在网上找了很长时间，发现大多的UI库都是如图三中的展示，所以开始我在努力的往图一样式靠（重新引入的样式组件js+css），花了很长时间，最后还是因为样式和取值复杂而放弃啦
图一：
然后我开始用其原生的select,虽然样式也改动了部分但是还是觉得有点丑，最后也放弃啦
图二：
最后由于时间的关系最终决定还是用mui自带的这个picker选择器，虽然丑了点但是改改之后还是可以看下去的。
图三：

图四就是我用mui修改后的效果，虽然有点丑哈，不过用起来是没问题的。
图四：
图五是我用vant组件写的，这个看着还可以，但是由于项目不是纯静态页无法配置等原因，这版vue的就暂时搁浅了，就当是练手啦。
图五：

mui下拉框picker选择器使用

在你需要展示的位置加

<div id='showDepartmentPicker' class="search-item">
	<span id='departmentResult' class="search-cont mui-ellipsis defaultStyle">请选择申请部门<i></i></span>
</div>

注释：其中的为这个图标，具体样式根据需求而定

(function($, doc) {
           $.init();
            $.ready(function() {
	//性别
	var departmentPicker = new $.PopPicker();
	departmentPicker.setData([{
	    value: '1',
	        text: '男'
	    }, {
	        value: '2',
	        text: '女'
	}]);
	var showSexPickerButton = doc.getElementById('showSexPicker');
	var sexResult = doc.getElementById('sexResult');
	showSexPickerButton.addEventListener('tap', function(event) {
	    departmentPicker.show(function(items) {
	        sexResult.innerHTML = items[0].text+"<i></i>";
	        //返回 false 可以阻止选择框的关闭
	        //return false;
	    });
	}, false);
	
            });
        })(mui, document);

然后整体根据你的设计图改改样式就ok啦！