1.0.3 • Published 9 months ago
vue2-calendar-cc v1.0.3
calendar
一个 vue2 的简单日历组件
支持的功能
- 月份切换
- 年份切换
- 高亮指定日期
- 黑夜模式
props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| width | Number/String | '600px' | 日历的宽度 |
| highlight | Number/String | '' | 日历的高度 |
| theme | String | '' | 主题颜色(可选'dark') |
| currentTime | String | 系统年月日 | 初始化的时间(xxxx-xx-xx) |
| autoMonthSwitch | Boolean | true | 点击非当前月日期,是否自动跳转到目标月份 |
events
| 名称 | 说明 |
|---|---|
| change | change(item),切换日期时的回调事件 |
| dateClick | dateClick(item),点击日期时的回调事件 |
slot
| 名称 | 说明 |
|---|---|
| header | 日历头部的插槽 |
methods
| 名称 | 说明 |
|---|---|
| prevMonth | 切换到上一个月 |
| nextMonth | 切换到下一个月 |
| prevYear | 切换到上一年 |
| nextYear | 切换到下一年 |
| backToToday | 切换到今天(受 currentTime 影响) |
Project Setup
npm i vue2-calendar-cc使用方法
<template>
<div>
<Calendar width="600px" theme="dark" :currentTime.sync="currentTime"></Calendar>
</div>
</template>
<script>
import Calendar from 'vue2-calendar-cc';
export default {
components: {
Calendar,
},
data() {
return {
currentTime: '2023-01-01',
};
},
};
</script>
<style>
@import url('../node_modules/vue2-calendar-cc/dist/style.css');
</style>