餓了么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

Tags:

VirMach 便宜 VPS