vue-calendar-component 封装多日期选择组件的实例代码

那么我们开始讲解“vue-calendar-component 封装多日期选择组件的实例代码”的攻略。

1. 简介

vue-calendar-component 是一个基于 Vue 的日历组件，支持单选、范围选择、多选等模式，还支持设置日期限制、自定义样式等功能。它的代码托管在 Github 上，并提供了详细的文档与示例。

2. 安装与使用

通过 npm 安装 vue-calendar-component：

npm install vue-calendar-component --save

在 Vue 项目中使用：

<template>
  <div>
    <vue-calendar-component v-model="selectedDates" mode="multiple" />
  </div>
</template>
<script>
import VueCalendarComponent from 'vue-calendar-component';
export default {
  components: { VueCalendarComponent },
  data () {
    return {
      selectedDates: []
    };
  }
};
</script>

3. 实例代码

下面我们来看一下如何使用 vue-calendar-component 做一个多日期选择组件的封装。

<template>
  <div>
    <div class="input-group">
      <input type="text" class="form-control" v-model="selectedDatesStr" readonly />
      <div class="input-group-append">
        <button @click="showDatePicker">选择日期</button>
      </div>
    </div>
    <div v-if="isDatePickerVisible" class="date-picker">
      <vue-calendar-component
        v-model="selectedDates"
        mode="multiple"
        @input="hideDatePicker"
      />
    </div>
  </div>
</template>
<script>
import VueCalendarComponent from 'vue-calendar-component';

export default {
  components: { VueCalendarComponent },
  data () {
    return {
      selectedDates: [],
      isDatePickerVisible: false
    };
  },
  computed: {
    selectedDatesStr () {
      return this.selectedDates.map(date => formatDate(date)).join(', ');
    }
  },
  methods: {
    showDatePicker () {
      this.isDatePickerVisible = true;
    },
    hideDatePicker () {
      this.isDatePickerVisible = false;
    }
  }
};

function formatDate (d) {
  const year = d.getFullYear();
  const month = d.getMonth() + 1;
  const date = d.getDate();
  return `${year}-${padZero(month)}-${padZero(date)}`;
}

function padZero (num) {
  return num < 10 ? `0${num}` : num;
}
</script>
<style>
.date-picker {
  position: absolute;
  z-index: 1;
  top: 44px;
  left: 0;
}
</style>

这个多日期选择组件包含一个文本框和一个 “选择日期” 的按钮，点击按钮会弹出日历选择器。选择完日期后，文本框中会显示选中的日期，以英文逗号隔开。

4. 示例说明

我们可以在 Vue 项目中引入该组件，然后在模板中使用该组件：

<template>
  <div>
    <date-picker v-model="selectedDates" />
    <h3>已选择的日期：</h3>
    <ul>
      <li v-for="date in selectedDates" :key="date">{{ formatDate(date) }}</li>
    </ul>
  </div>
</template>
<script>
import DatePicker from '@/components/DatePicker.vue';

export default {
  components: { DatePicker },
  data () {
    return {
      selectedDates: []
    };
  },
  methods: {
    formatDate (d) {
      const year = d.getFullYear();
      const month = d.getMonth() + 1;
      const date = d.getDate();
      return `${year}-${padZero(month)}-${padZero(date)}`;
    },
    padZero (num) {
      return num < 10 ? `0${num}` : num;
    }
  }
};
</script>

可以看到我们使用了一个叫做 DatePicker 的组件，然后将组件的 v-model 绑定到 selectedDates 数据上。在模板中，我们循环展示了已选择的日期。

还可以自定义日历的样式。例如，我们想把日历的背景颜色和字体颜色变成深色：

.vue-calendar .vc-cell {
  color: #eee;
  background-color: #333;
}
.vue-calendar .vc-cell:hover {
  background-color: #555;
}

这样一来，我们就可以得到一个自定义样式的多日期选择组件。