pc-component-v5/examples/vue-monthly-picker/src/VueMonthlyPickerExample.vue

<template>
  <div style="margin-top: 20px;">
    <h4>正常使用</h4>
    <month-picker v-model="selectedMonth" :placeholder="placeholder" @selected="monthSelected" />
    <p>当前选择：{{ selectedMonth }}</p>
    <h4>限制范围(前后六个月)</h4>
    <a-switch v-model:checked="isLimitRange" @change="rangeChange" />
    <month-picker
      v-model="selectedMonth" :placeholder="placeholder" :disabled-date="disabledDate"
      @selected="monthSelected"
    />
    <h4>禁用</h4>
    <month-picker v-model="selectedMonth" :placeholder="placeholder" :disabled="disabled" @selected="monthSelected" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import dayjs from 'dayjs';
import MonthPicker from '@/vue-monthly-picker/src/VueMonthlyPicker.vue';

const selectedMonth = ref('2025-06');
const isLimitRange = ref(false);
const min = ref(null);
const max = ref(null);
const placeholder = ref('请选择月份');
const disabled = ref(true);

// 月份变更
const monthSelected = value => {
  console.log('月份变更：', value);
};
// 限制日期
const disabledDate = current => {
  if (!current) return false;
  const date = dayjs(current);

  if (!min.value || !max.value) return false;
  return date < min.value.startOf('month') ||
    date > max.value.endOf('month');
};
// 限制范围
const rangeChange = checked => {
  if (checked) {
    min.value = dayjs().subtract(6, 'month');
    max.value = dayjs().add(6, 'month');
  } else {
    min.value = null;
    max.value = null;
  }
};
</script>