前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >饿了么Mint UI库Datetime picker日期选择器采坑记录

饿了么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 文件,如下:

代码语言: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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

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

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

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

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 弹出选择:
  • 日期组件 Datetime Picker :
  • 开始时间(日期的最小可选值)问题:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档