Vue 会议选择器(Vue Meeting Selector)
made with Vuejs

Vue 会议选择器(Vue Meeting Selector)是一个轻量级的、可定制的会议选择器。此组件受Doctolib的会议选择器的启发，通过Vuejs组件的强大功能对其进行了增强。

Vue 会议选择器(Vue Meeting Selector)使用了Vue.js和Typescript开发。

安装

Npm

npm install vue-meeting-selector --save

Yarn

yarn add vue-meeting-selector

使用

<template>
  <vue-meeting-selector
    v-model="meeting"
    :date="date"
    loading="loading"
    :meetings-days="meetingsDays"
    @next-date="nextDate"
    @previous-date="previousDate" />
</template>

<script>
import VueMeetingSelector from 'vueMeetingSelector';

export default {
  components: {
    VueMeetingSelector,
  },
  data() {
    return {
      date: new Date('2020-01-01:01:00'),
      meeting: null,
      loading: false,
      meetingsDays: [],
    };
  },
  methods {
    getMeetings(date) {
      // methods who return the meetings
    },
    async nextDate() {
      this.loading = true;
      const date = new Date(this.date);
      date.setDate(date.getDate() + 7);
      this.meetingsDays = await this.getMeetings(date);
      this.date = date;
      this.loading = false;
    },
    async previousDate() {
      this.loading = true;
      const date = new Date(this.date);
      date.setDate(date.getDate() - 7);
      this.meetingsDays = await this.getMeetings(date);
      this.date = date;
      this.loading = false;
    },
  },
  async created() {
    this.loading = true;
    this.meetingsDays = await this.getMeetings(this.date);
    this.loading = false;
  },
};
</script>