vue 封装月份多选组件

在Vue中，可以通过创建一个组件来实现月份的多选功能。以下是一个简单的示例，展示了如何创建这样的组件：

<template>
  <div>
    <div v-for="(year, index) in years" :key="index">
      <h3>{{ year.label }}</h3>
      <div v-for="(month, monthIndex) in year.months" :key="monthIndex">
        <input
          type="checkbox"
          :id="`month-${year.value}-${month.value}`"
          :value="`${year.value}-${month.value}`"
          v-model="selectedMonths"
        />
        <label :for="`month-${year.value}-${month.value}`">{{ month.label }}</label>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      years: [
        {
          label: '2022',
          value: 2022,
          months: [
            { label: 'Jan', value: 1 },
            { label: 'Feb', value: 2 },
            // ...
            { label: 'Dec', value: 12 },
          ],
        },
        // ...
      ],
    };
  },
  computed: {
    selectedMonths: {
      get() {
        return this.value;
      },
      set(value) {
        this.$emit('input', value);
      },
    },
  },
};
</script>

这个组件使用了一个嵌套的对象数组来表示年份和月份，并通过双向绑定(v-model)将选中的月份数组与父组件通信。用户可以选择或取消选择月份，这些变化将通过自定义事件(input)发送给父组件。在父组件中，你可以像使用任何其他v-model绑定的输入字段一样使用这个组件。