vue-time-slot

这款组件是一个会议预约时间的组件，时间轴为早7-晚11，可自由选择请添加图片描述非常便捷，点击确认后会返回一个时间段,首先我们安装

npm install vue3-time-slott | yarn add vue3-time-slot

安装引入直接引入

<script setup lang="ts">
import VueTimeSlotVue from "vue3-time-slot";
// 可以通过setup的方式也可以通过注册组件的方法
</script>

然后就是直接使用

<template>
  <VueTimeSlotVue></VueTimeSlotVue>
</template>

在这里插入图片描述这样组件就被引入成功了，这样我们就可以使用的了，我们提供了俩个方法，ok和cancel方法

<script setup lang="ts">
import VueTimeSlotVue from "vue3-time-slot";
const ok = (date: Date[]) => {
  console.log(date);
};

const cancel = () => {
  console.log("取消");
};
</script>

<template>
  <VueTimeSlotVue class="x" @ok="ok" @cancel="cancel"></VueTimeSlotVue>
</template>

点击确认就会触发ok这个方法，返回你点击的时间，比如在这里插入图片描述点击取消就会触发cancel方法这里，会议预约组件就完成了，github地址github.com/liming-xxw/…

vue-time-slot 一款基于vue3的会议预约时间组件，时间轴为早7-晚11，可自由选择，并且非常方便。

vue-time-slot