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

德顺

发布于 2019-12-02 12:27:39

2.5K0

发布于 2019-12-02 12:27:39

文章被收录于专栏：前端资源

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://cloud.tencent.com/developer/article/1546514

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

mint ui

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度