DateOptions.vue

<template>
  <div class="date-options-container">
    <!-- 两种形式 0:select 1:button -->
    <template v-if="showType === 0">
      <!-- select -->
      <el-select v-model="dateType" placeholder="请选择日期">
        <el-option
          v-for="item in dateList"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </template>
    <template v-else>
      <!-- button -->
      <div class="date-btn-wrapper">
        <span
          class="date-btn-item"
          :class="{ active: dateType === item.value }"
          v-for="item in dateList"
          :key="item.value"
          @click="onDateChange(item.value)"
        >
          <span class="date-btn">{{ item.label }}</span>
        </span>
      </div>
    </template>
    <div class="date-option-wrapper">
      <el-date-picker
        class="date-option-item"
        v-show="dateType === 'day'"
        v-model="dayVal"
        type="date"
        placeholder="选择日期"
        :picker-options="pickerOptions"
      />
      <el-date-picker
        class="date-option-item"
        v-show="dateType === 'week'"
        v-model="weekVal"
        type="week"
        format="yyyy 第 WW 周"
        placeholder="选择周"
        :picker-options="pickerOptions"
      />
      <el-date-picker
        class="date-option-item"
        v-show="dateType === 'month'"
        v-model="monthVal"
        type="month"
        placeholder="选择月"
        :picker-options="pickerOptions"
      />
      <el-date-picker
        class="date-option-item"
        v-show="dateType === 'year'"
        v-model="yearVal"
        type="year"
        placeholder="选择年"
        :picker-options="pickerOptions"
      />
      <el-date-picker
        class="date-option-item"
        v-show="dateType === 'custom'"
        v-model="customTimeVal"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :picker-options="pickerOptions"
      />
    </div>
  </div>
</template>

<script>
const list = ['day', 'week', 'month', 'year'].map(item => ({
  label: item,
  value: item
}))

export default {
  name: 'DateOptions',
  props: {
    showType: {
      type: Number,
      default: 0
    },
    dateList: {
      type: Array,
      default: () => list
    },
    defaultsDate: {
      type: String,
      default: 'day'
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        }
      },
      dayVal: '',
      weekVal: '',
      monthVal: '',
      yearVal: '',
      customTimeVal: ''
    }
  },
  computed: {
    dateType: {
      get() {
        return this.defaultsDate
      },
      set(val) {
        this.$emit('update:defaultsDate', val)
      }
    }
  },
  created() {
    // 初始化时间 日周月年自定义
    this.dayVal = new Date()
    this.weekVal = new Date()
    this.monthVal = new Date()
    this.yearVal = new Date()
    this.customTimeVal = new Date()
  },
  methods: {
    onDateChange(val) {
      this.dateType = val
    }
  }
}
</script>

<style lang="scss" scoped>
.date-options-container {
  display: inline-block;
  position: relative;

  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.date-btn-wrapper {
  display: inline-block;
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.date-btn-item {
  float: left;
  font-size: 14px;
  line-height: 1;
  padding: 8px 24px;
  border: 1px solid #e5e5e5;
  margin-right: 36px;
  color: #777;
  cursor: pointer;
  box-sizing: border-box;

  &:last-child {
    margin-right: 0;
  }

  &.active {
    padding: 8px 24px;
    background: #4bbeff;
    color: #fff;
    border: none;
    box-shadow: 0 0 10px -2px #666;
  }
}

.date-option-wrapper {
  float: right;
  padding-left: 36px;
}
.date-option-item {
  vertical-align: middle;
  line-height: 30px;
}
</style>