[TOC]
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
options | 参数 | object | { el, data, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, renderGrid, beforeDestroy, destroyed} | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
el | 渲染根节点 | HTMLElement | string | — | — |
data | 见下 | — | — | — |
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value | 选择的时间 | date | — | new Date() |
mode | 渲染模型 | string | 'year' |'month' |'day' | 'day' |
事件名 | 说明 | 参数 |
---|---|---|
beforeCreate | 创建实例前的回调函数 | — |
created | 创建实例后的回调函数— | — |
beforeMount | 模板挂载前的回调函数 | — |
mounted | 模板挂载后的回调函数 | — |
beforeUpdate | 模板更新前的回调函数 | — |
updated | 模板更新后的回调函数 | — |
renderGrid | 自定义渲染的回调函数 | {date, el, mode} |
beforeDestroy | 销毁前的回调函数 | — |
destroyed | 销毁后的回调函数 | — |
<link rel="stylesheet" href="https://unpkg.com/td-calendar/lib/style/index.min.css">
<script src="https://unpkg.com/td-calendar/lib/index.min.js"></script>
new TdCalendar({
el: '.calendar',
data: {
value: new Date(),
mode: 'year'
},
beforeCreate() {
console.log("实例创建前的回调");
},
created() {
console.log("实例创建后的回调");
},
beforeMounte() {
console.log("模板挂载前的回调");
}
mounted() {
console.log("模板挂载后的回调");
}
beforeUpdate() {
console.log("模板更新前的回调");
}
updated() {
console.log("模板更新后的回调");
}
renderGrid(data) {
console.log("自定义渲染,可返回jsx语法");
const { date, el, mode } = data
switch (mode) {
case "year":
return date.getFullYear()
break;
case "month":
return date.getMonth() + 1 + "月"
break;
default:
return date.getDate()
break;
}
},
beforeDestroy() {
console.log("销毁前的回调");
},
destroyed() {
console.log("销毁后的回调");
}
})