vue生日选择组件

自己实现一个生日选择器

如新增一个会员信息，或者修改会员信息，需要新增或者修改会员生日，这个生日选择组件需要父组件传原生日信息，并将获取值传回父组件，
这里我们使用vue来实现这个生日选择组件，废话不多说 我们看下代码部分

1. html部分：

• 使用on-bind：value单向绑定父组件传入的生日获取到的curYear、curMonth、curDay；
• 每次select改动触发@change事件，修改并传值给父组件

<template>
  <div>
    <el-row >
        <el-select :value="curYear" @change="setYear" style="max-width: 90px;">
          <el-option
                  v-for="item in yearList"
                  :key="item"
                  :label="item"
                  :value="item"
          ></el-option>
        </el-select>
      <span style="margin-left: 10px">年</span>
        <el-select :value="curMonth" @change="setMonth" style="max-width: 90px;margin-left: 30px">
          <el-option
                  v-for="item in monthList"
                  :key="item"
                  :label="item"
                  :value="item"
          ></el-option>
        </el-select>
      <span style="margin-left: 10px">月</span>
        <el-select :value="curDay" @change="setDay" style="max-width: 90px;margin-left: 30px">
          <el-option
                  v-for="item in dayList"
                  :key="item"
                  :label="item"
                  :value="item"
          ></el-option>
        </el-select>
      <span style="margin-left: 10px">日</span>
    </el-row>
  </div>
</template>

2. JS部分：

1. 获取父组件传入的生日birtydayInfo，并在computed计算属性中分别获取年/月/日-curYear、curMonth、curDay；
2. 还有select中的options绑定的年份列表、日期列表都用计算属性进行计算，月份列表直接12个月即可，特别注意的是年份列表需要从今年开始；
3. 每次调用set日期的方法时，都要$emit函数setBirthDay和他的参数this.birtydayInfo；

  export default {
    props:['birtydayInfo'],
    name: "dateSelect",
    computed:{
      curYear(){
        return this.birtydayInfo.year;
      },
      curMonth(){
        return this.birtydayInfo.month;
      },
      curDay() {
        return this.birtydayInfo.day;
      },
      yearList() {
        let currentYear = new Date().getFullYear();
        return this.getYearArr(1900, currentYear);
      },
      dayList() {
        let monthRange = this.getMonthDay(this.curYear, this.curMonth);
        return this.getNumberArr(1, monthRange);
      },
    },
    data() {
      return {
        monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
      };
    },
    methods: {
      getNumberArr(a, b) {
        return Array.from(Array(b - a + 1)).map((e, i) => a + i);
      },
      getYearArr(a, b) {
        return Array.from(Array(b - a + 1)).map((e, i) => a + i).reverse();
      },
      getMonthDay(year, month) {
        let days = new Date(year, month, 0).getDate();
        return days;
      },
      setYear(year){
        this.birtydayInfo.year = year;
        this.$emit('setBirthDay',this.birtydayInfo);
      },
      setMonth(month){
        this.birtydayInfo.month = month;
        this.$emit('setBirthDay',this.birtydayInfo);
      },
      setDay(day){
        this.birtydayInfo.day = day;
        this.$emit('setBirthDay',this.birtydayInfo);
      },
    }
  }

在父组件中引入子组件：

<date-select :birtydayInfo="birtydayInfo" @setBirthDay="setBirthDay"></date-select>

父组件中的setBirthDay方法，则用来格式化新获取到的生日信息：

setBirthDay(birtydayInfo) {
  this.birtydayInfo = birtydayInfo;
  let {
    year = '1900',
    month = '1',
    day = '1',
  } = this.birtydayInfo;
  this.memberInfo.birthday = `${year}-${month}-${day}`;
}

到这里，我们即可获取到“1900-1-1”这样格式的生日信息了