小程序自定义vue日期组件

<template>
  <div>
    <my-mask :showMask="showDate"></my-mask>
    <div class="calendar-div" v-if="showDate">
      <div class="date-but">
        <div>
          <span class="but-left" @click="dateBtn(1)">取消</span>
        </div>
        <div>
          <span class="but-right" @click="dateBtn(2)">确定</span>
        </div>
      </div>
      <picker-view v-if="dateType===1" class="date-view" indicator-style="height: 50px;" :value="value" @change="bindChange">
        <picker-view-column>
          <div v-for="y in years" :key="y" style="line-height: 50px; text-align: center;">{{ y }}年</div>
        </picker-view-column>
      </picker-view>
      <picker-view v-if="dateType===2" class="date-view" indicator-style="height: 50px;" :value="value" @change="bindChange">
        <picker-view-column>
          <div v-for="y in years" :key="y" style="line-height: 50px; text-align: center;">{{ y }}年</div>
        </picker-view-column>
        <picker-view-column>
          <div v-for="m in months" :key="m" style="line-height: 50px; text-align: center;">{{ m }}月</div>
        </picker-view-column>
      </picker-view>
      <picker-view v-if="dateType===3" class="date-view" indicator-style="height: 50px;" :value="value" @change="bindChange">
        <picker-view-column>
          <div v-for="y in years" :key="y" style="line-height: 50px; text-align: center;">{{ y }}年</div>
        </picker-view-column>
        <picker-view-column>
          <div v-for="m in months" :key="m" style="line-height: 50px; text-align: center;">{{ m }}月</div>
        </picker-view-column>
        <picker-view-column>
          <div v-for="d in days" :key="d" style="line-height: 50px; text-align: center;">{{ d }}日</div>
        </picker-view-column>
      </picker-view>
    </div>
  </div>
</template>

<script>
import myMask from '@/components/myMask/index'

export default {
  components: { //引入其它组件
    myMask
  },
  data() {  // 设置数据
    return {
      dateValue: '',
      years: [],
      months: [],
      days: [],
      value: [0, 0, 0],
      year: '',
      month: '',
      day: '',
    }
  },
  props: { //接收传过来的数据
    showDate: Boolean, //打开日期选择
    dateType: Number, //1年、2年月、3年月日
  },
  onLoad() {
    this.loadInit();
  },
  methods: {
    loadInit() {
      let date = new Date();
      this.year = date.getFullYear();
      this.month = date.getMonth();
      this.day = date.getDay();
      for (let i = 1990; i <= this.year; i++) {
        this.years.push(i)
      }
      for (let i = 1; i <= 12; i++) {
        this.months.push(i)
      }
      this.setDayNumber(this.year, this.month + 1);
      this.value = [this.years.length, this.month, this.day];
      this.setDateValue(this.year, this.month + 1, this.day + 1);
    },
    bindChange(e) {
      const val = e.target.value;
      this.setDayNumber(this.years[val[0]], this.months[val[1]]);
      this.value = val;

      this.year = this.years[val[0]];
      this.month = this.months[val[1]];
      this.day = this.days[val[2]];
      this.setDateValue(this.year, this.month, this.day);
    },
    setDayNumber(year, month) {
      let d = new Date(year, month, 0).getDate();
      let days = [];
      for (let i = 1; i <= d; i++) {
        days.push(i)
      }
      this.days = days;
    },
    setDateValue(year, month, day) {
      let v = [];
      v.push(year);
      if (month < 10) {
        v.push('0' + month)
      } else {
        v.push(month)
      }
      if (day < 10) {
        v.push('0' + day)
      } else {
        v.push(day)
      }
      this.dateValue = v.join('-');
    },
    dateBtn(type) {
      let val = null;
      if (type === 2) {
        switch (this.dateType) {
          case 1:
            val = this.dateValue.substr(0, 4);
            break;
          case 2:
            val = this.dateValue.substr(0, 7);
            break;
        }
      }
      let opt = {
        value: val,
        type: this.dateType,
      }
      this.$emit('dateChange', opt);
    },
  }
}
</script>

<style scoped>
.calendar-div {
  position: absolute;
  bottom: 20px;
  left: 0;
  width: 100%;
  padding: 10px 0;
  background-color: white;
  border-radius: 15px; /*添加边框圆角*/
  box-shadow: 0 0 10px white;
  z-index: 999;
}

.date-but {
  display: flex;
  color: white;
}

.date-but div {
  width: 50%;
}

.date-but .but-left {
  margin-left: 10px;
  float: left;
  padding: 4px 8px;
  background-color: #FFB800;
  border-radius: 5px;
}

.date-but .but-right {
  margin-right: 10px;
  float: right;
  padding: 4px 8px;
  background-color: #1E9FFF;
  border-radius: 5px;

}

.date-view {
  width: 100%;
  height: 300px;
}
</style>