VUE-H5-Calendar组件使用文档

1. 安装组件

yarn add vue-h5-calendar # 或者 npm install vue-h5-calendar

2. 引入组件

import Calendar from "vue-h5-calendar";

3. 引入样式

import 'vue-h5-calendar/lib/styles.scss';

4. 注册组件

Vue.use( Calendar);

5. 使用组件

<Calendar :visible.sync="visible"></Calendar>

6. 配置项

| 属性 | 默认参数 | 说明 | 类型 | | ---- | ---- | ---- | ---- | | visible | false | 是否显示 | Boolean | | themeColor | #3D7DE7 | 主题颜色(16进制) | String | | selectBgColor | #E9F3FD | 选中背景颜色(16进制) | String | | modalCancel | ()=> {} | 点击取消 | Function | | ok | ()=> {} | 点击确定 | Function | | dateClick | ()=> {} | 点击日期 | Function | | defaultDate | [] | 默认选中的日期 | Array | | type | day | 日历类型 | String | | isSwiper | true | 是否滑动 | Boolean | | swiperDirection | horizontal | 类型 | String | | showToDay | true | 是否显示今天 | Boolean | | showLunar | true | 是否显示农历 | Boolean | | calendarTypeShow | true | 是否显示日历类型 | Boolean | | typeList | ["day", "week", "month"] | 日历类型 | Array
| title | 日期选择 | 标题 | String | | okText | 确定 | 标题 | String | | cancelText | 取消 | 标题 | String | | maskClose | true | 是否点击遮罩层关闭 | Boolean |

swiperContainer高度 = calendar_day高度+20px * 6 calendar_day高度 = 60px

7. 插槽

<ComCalendar :visible.sync="visible">
  // 自定义日期
  <template v-slot:itemRender="{ date }">
    {{ date.date }}
  </template>
  // 自定义上一年、上一月、下一月、下一年、取消、今天、确定
  <template v-slot:prevYear>
  </template>
  <template v-slot:prevMonth>
  </template>
  <template v-slot:nextMonth>
  </template>
  <template v-slot:nextYear>
  </template>
  <template v-slot:cancel>
  </template>
  <template v-slot:toDay>
  </template>
  <template v-slot:ok>
  </template>
</ComCalendar>