饿了么Mint UI库Datetime picker日期选择器采坑记录

2019 年 12 月 2 日
筆記

Mint UI 是饿了么前端团队（elemeFE）推出的专门针对移动端的前端 UI 库，不过其 github 库已经有2年多没有更新了，API 也不是很详细。

不过多评价，还是有很多人用 Element UI的，下面记录一下使用 Mint UI 遇到的问题及解决方法：

如何安装我就不再赘述了，大家可以参考官方文档进行安装。讲一下多个 UI 库按需引入吧：

我已经配置了 Ant Design Vue 的按需引入了，只需要 Mint 的几个组件，可以引入需要的组件和对应的 css 文件，如下：

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：

<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：

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：

<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：

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 绑定数值：

<mt-datetime-picker      v-model="pickerDateValue"      ...

点击确定的时候赋值给对应的变量：

handleDateConfirm(){    this.pickerDate = formDate(this.pickerDateValue)  },

开始时间（日期的最小可选值）问题：

默认是十年前的1月1日，可以通过下面的格式，设置其最小可选日期，最大可选日期相同。

:startDate="new Date(1900,1,1)"

声明：本文由w3h5原创，转载请注明出处：《饿了么Mint UI库Datetime picker日期选择器采坑记录》 https://www.w3h5.com/post/451.html