vue实现选择季度

实现季度选择功能

在Vue中实现季度选择功能可以通过多种方式完成，以下是几种常见的方法：

使用自定义下拉选择器

创建一个自定义的下拉选择器组件，包含四个季度选项：

<template>
  <select v-model="selectedQuarter" @change="handleQuarterChange">
    <option value="Q1">第一季度 (1-3月)</option>
    <option value="Q2">第二季度 (4-6月)</option>
    <option value="Q3">第三季度 (7-9月)</option>
    <option value="Q4">第四季度 (10-12月)</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedQuarter: 'Q1'
    }
  },
  methods: {
    handleQuarterChange() {
      this.$emit('quarter-change', this.selectedQuarter)
    }
  }
}
</script>

使用按钮组实现季度选择

通过按钮组形式提供更直观的季度选择体验：

<template>
  <div class="quarter-buttons">
    <button 
      v-for="quarter in quarters" 
      :key="quarter.value"
      :class="{ active: selectedQuarter === quarter.value }"
      @click="selectQuarter(quarter.value)"
    >
      {{ quarter.label }}
    </button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedQuarter: 'Q1',
      quarters: [
        { value: 'Q1', label: 'Q1' },
        { value: 'Q2', label: 'Q2' },
        { value: 'Q3', label: 'Q3' },
        { value: 'Q4', label: 'Q4' }
      ]
    }
  },
  methods: {
    selectQuarter(quarter) {
      this.selectedQuarter = quarter
      this.$emit('change', quarter)
    }
  }
}
</script>

<style>
.quarter-buttons button {
  padding: 8px 16px;
  margin-right: 8px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.quarter-buttons button.active {
  background: #1890ff;
  color: white;
  border-color: #1890ff;
}
</style>

结合日期选择器实现

使用第三方日期选择器库（如Element UI、Ant Design Vue等）实现季度选择：

<template>
  <a-date-picker
    v-model="selectedDate"
    mode="quarter"
    format="YYYY-[Q]Q"
    placeholder="请选择季度"
    @change="handleQuarterChange"
  />
</template>

<script>
import { DatePicker } from 'ant-design-vue'

export default {
  components: {
    'a-date-picker': DatePicker
  },
  data() {
    return {
      selectedDate: null
    }
  },
  methods: {
    handleQuarterChange(date, dateString) {
      console.log('Selected quarter:', dateString)
      this.$emit('change', dateString)
    }
  }
}
</script>

实现季度范围计算

在选择季度后，可以计算该季度的开始和结束日期：

getQuarterRange(quarter) {
  const year = new Date().getFullYear()
  let startMonth, endMonth

  switch(quarter) {
    case 'Q1':
      startMonth = 0  // 一月
      endMonth = 2    // 三月
      break
    case 'Q2':
      startMonth = 3  // 四月
      endMonth = 5    // 六月
      break
    case 'Q3':
      startMonth = 6  // 七月
      endMonth = 8    // 九月
      break
    case 'Q4':
      startMonth = 9  // 十月
      endMonth = 11   // 十二月
      break
  }

  const startDate = new Date(year, startMonth, 1)
  const endDate = new Date(year, endMonth + 1, 0)  // 当月最后一天

  return {
    start: startDate,
    end: endDate
  }
}

响应式季度选择

结合当前日期自动选择当前季度：

mounted() {
  this.selectCurrentQuarter()
},
methods: {
  selectCurrentQuarter() {
    const month = new Date().getMonth()
    let currentQuarter

    if(month >= 0 && month <= 2) currentQuarter = 'Q1'
    else if(month >= 3 && month <= 5) currentQuarter = 'Q2'
    else if(month >= 6 && month <= 8) currentQuarter = 'Q3'
    else currentQuarter = 'Q4'

    this.selectedQuarter = currentQuarter
    this.$emit('change', currentQuarter)
  }
}

以上方法可以根据具体项目需求进行选择和组合，实现灵活多样的季度选择功能。