vue3+a-range-picker的简单封装

实现效果如图

// 公共组件
<template>
  <a-range-picker v-model:value="selectedRange" :presets="computedPresets" @change="handleChange"
    :format="selectedFormat" :value-format="selectedValueFormat" :picker="picker" />
</template>

// 引入vue的辅助函数和dayjs库
<script setup>
import { ref, computed } from 'vue'
import { defineProps, defineEmits } from 'vue' // 引入Vue的辅助函数
import dayjs from 'dayjs'

// 定义组件的props
const props = defineProps({
  value: {
    type: Array,
    default: () => []
  },
  format: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  valueFormat: {
    type: String,
    default: 'YYYY-MM-DD'
  },
  picker: { // 添加 picker 属性
    type: String,
    default: 'date' // 默认为 date
  }
})

// 定义组件的emits
const emits = defineEmits(['update:value', 'change'])

// 定义组件的响应式数据
const selectedRange = ref(props.value)

// 根据 picker 的值动态选择日期格式
const selectedFormat = computed(() => {
  return props.picker === 'month' ? 'YYYY-MM' : props.format
})

const selectedValueFormat = computed(() => {
  return props.picker === 'month' ? 'YYYY-MM' : props.valueFormat
})

// 根据 picker 的值动态选择日期范围选项
const computedPresets = computed(() => {
  if (props.picker === 'month') {
    return rangePresets.filter(preset => preset.label !== '本周' && preset.label !== '上周')
  } else {
    return rangePresets
  }
})

// 计算日期范围的起始日期
const today = dayjs()
const startOfThisWeek = today.startOf('week') // 当前周的开始日期
const startOfThisMonth = today.startOf('month') // 当前月的开始日期
const startOfLastWeek = startOfThisWeek.subtract(1, 'week') // 上周的开始日期
const startOfLastMonth = startOfThisMonth.subtract(1, 'month') // 上个月的开始日期
const startOfLastYear = today.subtract(1, 'year').startOf('year') // 去年的开始日期
const startOfThreeYearsAgo = today.subtract(3, 'year').startOf('year') // 近三年的开始日期
const endOfLastYear = startOfLastYear.endOf('year') // 去年的结束日期
const rangePresets = [
  { label: '本周', value: [startOfThisWeek, today] },
  { label: '上周', value: [startOfLastWeek, startOfThisWeek.subtract(1, 'day')] },
  { label: '本月', value: [startOfThisMonth, today] },
  { label: '上个月', value: [startOfLastMonth, startOfThisMonth.subtract(1, 'day')] },
  { label: '本年', value: [dayjs().startOf('year'), today] },
  { label: '去年', value: [startOfLastYear, endOfLastYear] },
  { label: '近三年', value: [startOfThreeYearsAgo, today] }
]

// 定义组件的事件处理函数
const handleChange = (value) => {
  selectedRange.value = value
  emits('update:value', value)
  emits('change', value)
}
</script>

// main.js
// 全局引入
import rangeSelect from '@/components/Select/selectionRange.vue'
app.component('range-select', rangeSelect )

// 页面使用例子
<range-select v-model:value="queryParams.date" :picker="'month'" />