使用vue-meeting-selector模板但无法显示日历

wtlkbnrh  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(122)

我试图创建一个日历与插槽的约会,使用户可以点击并选择一个时间进行预订。我使用的模板从包vue-meeting-selector。问题是,日历本身不显示在页面上。
这是模板的代码
'

<template>
  <div id="app">
    <vue-meeting-selector
      class="simple-example__meeting-selector"
      v-model="meeting"
      :date="date"
      :loading="loading"
      :class-names="classNames"
      :meetings-days="meetingsDays"
      @next-date="nextDate"
      @previous-date="previousDate"
    />
    <p>meeting Selected: {{ meeting ? meeting : "No Meeting selected" }}</p>
  </div>
</template>

<script>
import VueMeetingSelector from "vue-meeting-selector";
import data from "./data.json";

export default {
  name: "App",
  components: {
    VueMeetingSelector,
  },
  data() {
    return {
      date: new Date(),
      meetingsDays: [],
      meeting: { date: "2021-01-15T08:00:00.000Z" },
      loading: true,
      nbDaysToDisplay: 5,
    };
  },
  methods: {
    // @click on button-right
    async nextDate() {
      console.log("nextDate");
    },
    // @click on button-left
    async previousDate() {
      console.log("previousDate");
    },
  },
  async created() {
    this.meetingsDays = data;
    this.loading = false;
  },
};
</script>

<style>
</style>

'
我确实导入了我的组件import VueMeetingSelector from "vue-meeting-selector";上的包
我还安装了npm install --保存vue-meeting-selector包
当我试着运行前端时没有错误。它只是不显示日历。你知道我可能错过了什么吗
我从哪里得到这个模板的来源:https://codesandbox.io/s/vue-meeting-selector-ex-forked-lyw515?file=/src/App.vue:0-1084https://www.npmjs.com/package/vue-meeting-selector?activeTab=readme

wsewodh2

wsewodh21#

你需要使用slotsGeneratorAsync和导入样式import 'vue-meeting-selector/dist/style.css';
看看这个例子

相关问题