专栏首页前端资源饿了么Mint UI库Datetime picker日期选择器采坑记录

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue中使用setTimeout()定时器延迟执行方法不生效的原因及解决

    直接使用上面的代码执行 closeModal() 方法会报错 Uncaught TypeError: this.showModal is not a funct...

    德顺
  • iOS中Mint Picker滑动时页面跟着滚动的解决方法

    项目在使用饿了么前端团队的 Mint UI 库的 Picker 和 Datetime picker 组件,iOS系统访问时会出现滑动穿透的现象。

    德顺
  • JavaScript基础:call,apply,bind详解,三者有何区别和联系

    函数原型链中的 apply,call 和 bind 方法是 JavaScript 中相当重要的概念,与 this 关键字密切相关,相当一部分人对它们的理解还是比...

    德顺
  • Application Firewall Design

    Application Firewall Design Web Application Firewall, 7layer Firewall ---- 目录 1....

    netkiller old
  • Spring Import 三种用法与源码解读

      最近在看Spring Cloud相关的源码,每次引入一个新的starter,发现都会加一些enable的注解,比如:@EnableDiscoveryClie...

    良辰美景TT
  • WebGL基础教程:第二部分

    本文基于这个系列第一部分中介绍的框架,另外还增加了一个模型导入器,和针对3D对象定制的类。 你会从中了解到动画和控制,内容很多,我们赶紧开始吧。

    前端达人
  • ASP.NET Core中的依赖注入(5):ServicePrvider实现揭秘【补充漏掉的细节】

    到目前为止,我们定义的ServiceProvider已经实现了基本的服务提供和回收功能,但是依然漏掉了一些必需的细节特性。这些特性包括如何针对IServiceP...

    蒋金楠
  • ASP.NET Core中的依赖注入(5): ServiceProvider实现揭秘 【总体设计 】

    本系列前面的文章我们主要以编程的角度对ASP.NET Core的依赖注入系统进行了详细的介绍,如果读者朋友们对这些内容具有深刻的理解,我相信你们已经可以正确是使...

    蒋金楠
  • 【小家Spring】从Spring中的(ApplicationEvent)事件驱动机制出发,聊聊【观察者模式】【监听者模式】【发布订阅模式】【消息队列MQ】【EventSourcing】...

    说到事件驱动,我心里一直就有一个不解的疑问:它和我们老生长谈的一些概念比如:【观察者模式】【发布订阅模式】【消息队列MQ】【消息驱动】【EventSourcin...

    BAT的乌托邦
  • 调试利器-SSH隧道

    本文将教你如何通过 SSH 隧道把本地服务映射到外网,以方便调试,通常把这种方法叫内网穿透。

    IMWeb前端团队

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动