Calendar日历

基础用法

设置modelValue展示对应日期，未指定展示当前日期

2025年7月9日

星期日	星期一	星期二	星期三	星期四	星期五	星期六
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2
3	4	5	6	7	8	9

<script setup lang="ts">
import { ref } from 'vue';
const currentDate = ref(new Date())
</script>
<vt-calendar v-model="currentDate">
</vt-calendar>

自定义内容

通过设置名为 date-cell 的 scoped-slot 来自定义日历单元格中显示的内容。 在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。 详情解释参考下方的 API 文档。

2025年7月9日

星期日	星期一	星期二	星期三	星期四	星期五	星期六
06-29	06-30	07-01	07-02	07-03	07-04	07-05
07-06	07-07	07-08	07-09	07-10	07-11	07-12
07-13	07-14	07-15	07-16	07-17	07-18	07-19
07-20	07-21	07-22	07-23	07-24	07-25	07-26
07-27	07-28	07-29	07-30	07-31	08-01	08-02
08-03	08-04	08-05	08-06	08-07	08-08	08-09

<vt-calendar v-model="currentDate">
  <template #date-cell="{ data }">
    <p :class="data.isSelected ? 'is-selected' : ''">
      {{ data.day.split('-').slice(1).join('-') }}
      {{ data.isSelected ? '√' : '' }}
    </p>
  </template>
</vt-calendar>

API

属性

名称	类型	默认值	说明
modelValue	string	-	使用v-model绑定需要展示日期

插槽

名称	类型	说明
date-cell	object	格式是单元格日期