关于mui控件的使用

时间控件

1、引入相关css以及js：mui.picker.js、mui.picker.min.js、mui.poppicker.js、mui.picker.min.css、mui.poppicker.css
2、实例化时间控件对象

var datePicker=new mui.Dtpicker({type:'date'});

可选值 视图模式
‘datetime’ 完整日期视图(年月日时分)
‘date’ 年视图(年月日)
‘time’ 时间视图(时分)
‘month’ 月视图(年月)
‘hour’ 时视图(年月日时)



3、在相应触发的方法里使用show(),取到时间控件的值进行展示；

var me=this;
datePicker.show(function (selectItems)
{
me.newDate=selectItem.text;
}
)

4、在html中布局，使用@click方法来触发；

//html
 <p @click='showPicker4()'>
                <label class="must-fill">
                    生效日期：
                </label>
                <input type="text" readonly placeholder="请选择时间" v-model="newDate" />
            </p>

//js中声明该方法
      //备案生效时间
        showPicker4() {
            var me = this;
            datePicker.show(function (selectItems) {
                me.newDate= selectItems.text;
                console.log(me.newDate);
            });
        }

其他控件

1、也是先引入相关js、css
2、声明相关实例对象

var cardTypePicker=new.mui.PopPicker({layer:1,button:['取消'，'确定']})

layer
Type: Int
picker显示列数
buttons
Type: Array
picker显示按钮

3、给picker对象添加数据：setData支持数据格式为数组

cardTypePicker.setData([{value:'01',text:'居民身份证'},{value：‘02’，text:'社会保障卡'}])