Calendar日历

基础用法

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

2025年10月11日

星期日	星期一	星期二	星期三	星期四	星期五	星期六
28	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

<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年10月11日

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

<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	格式是单元格日期