vue+iview時間に基づいてプラグインのパッケージ処理を選択します.

<template>
  <div style="position: relative;display: inline-block;">
    {{label}}
    <Date-picker v-model="params.startTime" @on-change="handleChangeStart" type="date" placeholder="    " class="date-picker" :options="options">Date-picker>
    <span> span>
    <Date-picker v-model="params.endTime" @on-change="handleChangeEnd" type="date" placeholder="    " class="date-picker" :options="options">Date-picker>
    <Radio-group v-model="params.status" :class="(isBr)?'radio-group':''" v-if="quickSelect">
      <span>  ：span>
      <Radio label="week">  Radio>
      <Radio label="onemonth">1  Radio>
      <Radio label="threemonth">3  Radio>
      <Radio label="sixmonth">  Radio>
      <Radio label="year">  Radio>
    Radio-group>
  div>
template>
<script>
export default {
  //disableDate             string   (beforeToady,afterToady)
  props: ['startTime', 'endTime', 'disableDate'],
  data () {
    return {
      params: {
        status: '',
        startTime: null,
        endTime: null
      },
      isBr: false, //isBr       
      quickSelect: false,//         
      label: '    ：',// label     
      //     
      options: {}
    };
  },
  created () {
    //         
    if (this.$attrs.hasOwnProperty('quickSelect')) {
      this.quickSelect = true
    }
    //       
    if (this.$attrs.hasOwnProperty('isBr')) {
      this.isBr = true
    }
    //   label,   label
    if (this.$attrs.label) {
      this.label = this.$attrs.label
    }
    //             
    this.params.startTime = this.startTime
    this.params.endTime = this.endTime

    //        ,     
    //          
    if (this.disableDate === 'beforeToady') {
      this.options = {
        disabledDate: date => {
          return date && date.valueOf() < Date.now() - 86400000;
        }
      }
      //          
    } else if (this.disableDate === 'afterToady') {
      this.options = {
        disabledDate: date => {
          return date && date.valueOf() > Date.now();
        }
      }
    }
  },
  mounted () {
    //     
    //      this.$refs.foo.$emit('reset',startTime,endTime)
    this.$on('reset', (startTime, endTime) => {
      this.params.startTime = startTime;
      this.params.endTime = endTime;
      this.params.status = 'reset';
      this.$emit('selectData', this.params);
    })
  },
  methods: {
    handleChangeStart (data) {
      this.params.startTime = data;
      this.$emit('selectData', this.params);
    },
    handleChangeEnd (data) {
      this.params.endTime = data;
      this.$emit('selectData', this.params);
    }
  },
  watch: {
    'params.status' (val) {
      if (val === 'reset') {
        return;
      }
      this.params.endTime = this.$utils.time.formatTime();
      switch (val) {
        case 'week':
          this.params.startTime = this.$utils.time.formatSubtractTime(7, 'd')
          break;
        case 'onemonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(1, 'M')
          break;
        case 'threemonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(3, 'M')
          break;
        case 'sixmonth':
          this.params.startTime = this.$utils.time.formatSubtractTime(6, 'M')
          break;
        case 'year':
          this.params.startTime = this.$utils.time.formatSubtractTime(12, 'M')
          break;
      }
      this.$emit('selectData', this.params);
    }
  }
};
script>
<style scoped>
.date-picker {
  width: 135px;
  display: inline-block;
  margin-right: 10px;
}
.radio-group {
  position: absolute;
  top: 40px;
  right: 0;
  min-width: 315px;
  z-index: 10;
}
style>