Mint UI 是饿了么前端团队（elemeFE）推出的专门针对移动端的前端 UI 库，不过其 github 库已经有2年多没有更新了，API 也不是很详细。
不过多评价，还是有很多人用 Element UI的，下面记录一下使用 Mint UI 遇到的问题及解决方法：
如何安装我就不再赘述了，大家可以参考官方文档进行安装。讲一下多个 UI 库按需引入吧：
我已经配置了 Ant Design Vue 的按需引入了，只需要 Mint 的几个组件，可以引入需要的组件和对应的 css 文件，如下：
代码语言：javascript复制import { Picker, Popup, DatetimePicker } from 'mint-ui'; // 引入组件
// 引入所需 CSS 文件
import 'mint-ui/lib/picker/style.css';
import 'mint-ui/lib/Popup/style.css';
import 'mint-ui/lib/datetime-picker/style.css';
// 注册组件
Vue.component(Picker.name, Picker);
Vue.component(Popup.name, Popup);
Vue.component(DatetimePicker.name, DatetimePicker);弹出选择：
Popup 组件搭配 Picker 组件：
HTML：
代码语言：javascript复制<a-form-item
v-bind="formItemLayout"
label="意向薪酬"
class="list-item t-border">
<a-input autosize="true" size="large" placeholder="请选择" @click="popupShow" :value="popupValue"/>
<icon-font type="iconright" class="right-arrow"/>
<mt-popup
class="selectPicker"
v-model="popupVisible"
position="bottom">
<div class="pickerTitle">
<a-button type="link" class="c-desc" @click="popupHide">取消</a-button>
<h4>意向薪酬</h4>
<a-button type="link" @click="handlePopup">确定</a-button>
</div>
<mt-picker
:slots="slots"
:itemHeight="50"
:visibleItemCount="3"
@change="onValuesChange"></mt-picker>
</mt-popup>
</a-form-item>JS：
代码语言：javascript复制data() {
return {
popupVisible: false,
popupValue: '',
popupValue1: '',
slots: [{
flex: 1,
values: ['创新金融-银行', '创新金融-保险', '创新金融-基金'],
textAlign: 'center'
}],
},
methods: {
popupShow (){
this.popupVisible = true
},
popupHide (){
this.popupVisible = false
},
onValuesChange(picker, values) { //选择行业
if (values[0] > values[1]) {
picker.setSlotValue(1, values[0]);
}
this.popupValue1 = picker.getValues()[0]
},
handlePopup () {
this.popupVisible = false;
this.popupValue = this.popupValue1;
},
}CSS 我就不贴了，可以在 Picker 上面自己写一个 Title 头。
特殊说明一下：:itemHeight="50" 每个 solt 的高度，:visibleItemCount="3" slot 中可见备选值的个数。
日期组件 Datetime Picker ：
HTML：
代码语言：javascript复制<a-form-item
label="出生日期"
class="list-item">
<a-input autosize="true" size="large" placeholder="请选择" @click="popupDateShow" :value="pickerDate"/>
<icon-font type="iconright" class="right-arrow"/>
<mt-datetime-picker
class="datePicker"
ref="datePicker"
type="date"
:startDate="new Date(1900,1,1)"
year-format="{value} 年"
month-format="{value} 月"
date-format="{value} 日"
v-model="pickerDateValue"
:visibleItemCount="5"
@confirm="handleDateConfirm">
</mt-datetime-picker>
</a-form-item>JS：
代码语言：javascript复制data() {
return {
pickerDateValue: new Date(1988,0,1),
pickerDate: "",
}
},
methods: {
popupDateShow (){
this.$refs.datePicker.open();
},
handleDateConfirm(){
this.pickerDate = formDate(this.pickerDateValue)
},
},特殊注意：
默认点击确定按钮返回的是一个时间戳，可以先在 data() 中定义一个时间并设置好格式：pickerDateValue: new Date(1988,0,1)
然后用 v-model 绑定数值：
代码语言：javascript复制<mt-datetime-picker
v-model="pickerDateValue"
...点击确定的时候赋值给对应的变量：
代码语言：javascript复制handleDateConfirm(){
this.pickerDate = formDate(this.pickerDateValue)
},开始时间（日期的最小可选值）问题：
默认是十年前的1月1日，可以通过下面的格式，设置其最小可选日期，最大可选日期相同。
代码语言：javascript复制:startDate="new Date(1900,1,1)"声明：本文由w3h5原创，转载请注明出处：《饿了么Mint UI库Datetime picker日期选择器采坑记录》 https://cloud.tencent.com/developer/article/1546514
