vue 实现月日选择

需求描述

最近需要实现一个只选择月和日的组件，如下图

本来想实现像elementUI 日期选择器类似的功能，但是element没有，网上也没有找到合适的，最后换了一个思路，利用element的Cascader 级联选择器实现了一个，感觉看上去也还行在此分享一下

实现效果

实现起来挺简单，主要是为大家提供一种思路

代码如下

   <el-cascader
         v-model="date"
         :options="options"
         separator=""
         :props="{ expandTrigger: 'hover' }"
	></el-cascader>     

  data() {
    return {
      date: [],
      options: [],
    };
  },  
  mounted() {
    this.initDate();
  },
  methods: {
	 initDate() {
      let { options } = this;
      for (let i = 0; i < 12; i++) {
        let month = { value: `${i + 1}月`, label: `${i + 1}月` };
        let children = [];
        for (let j = 0; j < 31; j++) {
          let day = { value: `${j + 1}号`, label: `${j + 1}号` };
          if (j < 29) {
            children.push(day);
          }
          if (j == 29) {
            if (i != 1) {
              children.push(day);
            }
          }
          if (j == 30) {
            if ([1, 3, 5, 7, 8, 10, 12].includes(i + 1)) {
              children.push(day);
            }
          }
        }
        this.$set(month, "children", children);
        options.push(month);
      }
    },
  }