我试图创建一个日历与插槽的约会,使用户可以点击并选择一个时间进行预订。我使用的模板从包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
1条答案
按热度按时间wsewodh21#
你需要使用
slotsGeneratorAsync
和导入样式import 'vue-meeting-selector/dist/style.css';
。看看这个例子