VUE 制作日期组件（今日，近3天，近7天）组件 父子传参实现

一、VUE制作日期组件如下图所示，并实现监听父组件动态传参，子组件日期选择事件监听

1、首先对上述组件进行CSS布局，

<template>
  <div>
    <div class="date-picker-box">
      <div class="date-picker-hot-key-box">
        <span>日期范围</span>
        <el-radio-group
                style="margin-top: 8px"
                v-model="dateBtn" size="medium" @change="bindRadioChange">
          <el-radio-button
                  :label="item.label"
                  v-for="item in radioGroup"
                  :key="item.label">{{ item.value }}
          </el-radio-button>
        </el-radio-group>
      </div>
      <el-date-picker
              class="z-data-picker"
              v-model="datePeriod"
              size="medium"
              @change="bindDatePickerChange"
              type="daterange"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
      </el-date-picker>
    </div>
  </div>
</template>

<script>
import { getYesterdayDateStr, getLastWeekDateStr, getLastThreeDateStr } from '../utils'
export default {
  name: 'base-date-picker',
  props: {
    initdate: {
      type: Array
    }
  },
  data() {
    return {
      dateBtn: 'last 7 days',
      radioGroup: [
        {
          label: 'today',
          value: '今日'
        }, {
          label: 'last 3 days',
          value: '近3天'
        }, {
          label: 'last 7 days',
          value: '近7天'
        }
      ],
      datePeriod: []
    }
  },
  watch: {
    initdate: function(val, oldval) {
      // 检测父组件值变化
      this.datePeriod = this.initdate
      this.bindDatePickerChange()
    }
  },
  components: {},
  computed: {},
  filters: {},
  methods: {
    triggerSelectDate() {
      this.$emit('select-date', this.datePeriod)
    },
    bindRadioChange() {
      switch (this.dateBtn) {
        case 'today':
          this.datePeriod = Array.of(getYesterdayDateStr(), getYesterdayDateStr())
          this.triggerSelectDate()
          break
        case 'last 3 days':
          this.datePeriod = Array.of(getLastThreeDateStr(), getYesterdayDateStr())
          this.triggerSelectDate()
          break
        case 'last 7 days':
          this.datePeriod = Array.of(getLastWeekDateStr(), getYesterdayDateStr())
          this.triggerSelectDate()
          break
      }
    },
    bindDatePickerChange() {
      this.dateBtn = ''
      this.triggerSelectDate()
    }
  },
  mounted() {
    this.bindRadioChange()
  }
}

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../styles/variables";

  .date-picker-box {
    display: flex;
    flex-wrap: wrap;
    .date-picker-hot-key-box {
      margin-right: 30px;
      min-width: 310px;
      span {
        margin-right: 15px;
      }
    }
  }

  .z-data-picker {
    margin-top: 8px;
    min-width: 255px;
  }

</style>

2、测试代码

<template>
    <div >
        <basedatapicker v-on:select-date="handledatachage"  v-bind:initdate="tmpinitdate"></basedatapicker>
    </div>
</template>

<script>

// 组件 方法引入
import basedatapicker from '@/components/base-date-picker'
import { getYesterdayDateStr, getLastWeekDateStr, getThisYearStartDateStr, getThisYearEndDateStr, getYesterdayDate, formatMonthStr, getYearEndDate, getMonthEndDate } from '../../../utils/'
export default {
  name: 'test',
  data () {
    return {
      tmpinitdate: [],
      date: [ ],
      init_date: [
        getLastWeekDateStr(),
        getThisYearEndDateStr()
      ]
    }
  },
  methods: {
    handledatachage(e) {
      this.date = e
    }

  },
  mounted() {
    console.log(this.init_date)
    this.tmpinitdate = this.init_date
  },
  // 声明组件
  components: { basedatapicker }
}
</script>

<style scoped>

</style>