【vue】vant + vux UI组件实现【tab栏+日历】日期选择器

问题描述

HMS需要实现产品的一个日期选择器。要求如下，小于等于7天的日期范围显示横向滑动的日期栏，大于7天的日期范围则要在日期栏右侧固定显示一个日历icon，点击显示日历，且日期上显示有无号的标志（可认为是该日期的一个特殊标识）

 

完整实例

https://github.com/yapeee/vue_points

 

效果展示1：

效果展示2：

重难点实现

1.日期tab栏的实现

采用vant的Tab组件，通过自定义样式实现。

    
      
      

        

          {
    {item.dateStr1 === today ? '今日' : item.week}}
          {
    {item.state === 'yes'? '有' : '无'}}
        
        
{
    {item.dateStr}}
      
    
  

2.日历弹出框的实现

采用vant的ActionSheet组件实现弹出框效果，然后嵌入vux的InlineCalendar日历组件，实现日历弹出框。

3.自定义日历日期

// 日历组件
this.buildSlotFn = (line, index, data) => {
    return this.stateList[data.formatedDate] === 'yes' ? '
' : '
'
}

 

4.日历选择器联动日期tab栏

给日历组件添加@on-change事件，获取到选中日期后，清空数组，重新给数组赋值。（tips：注意先清空tab栏数组，然后异步更新数组）

chooseCalendarDay (day) { // 选择日历日期
    this.show = false
    this.active = 0
    this.dateList = []
    this.$nextTick(() => {
      let date = new Date(day)
      this.dateList = this.getDateItems(date)
      this.chooseDate(this.active)
    })
  },

 

5.传值父组件

chooseDate (name) { // 选择日期
  this.selectDate = this.dateList[name]
  this.$emit('getDate', this.selectDate)
},

 

其他

有时间尝试全部使用vux实现上述页面。

欢迎star&issue

---------201907031更新------------

增加自定义日历日期实现方式