1.0.3 • Published 2 years ago
自定义右键菜单
TOC
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| options | 参数 | object | { el, data, beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, renderGrid, beforeDestroy, destroyed} | — |
options说明
参数
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| el | 渲染根节点 | HTMLElement | string | — | — |
| data | 见下 | — | — | — |
data
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|
| value | 选择的时间 | date | — | new Date() |
| mode | 渲染模型 | string | 'year' |'month' |'day' | 'day' |
事件
| 事件名 | 说明 | 参数 |
|---|
| beforeCreate | 创建实例前的回调函数 | — |
| created | 创建实例后的回调函数— | — |
| beforeMount | 模板挂载前的回调函数 | — |
| mounted | 模板挂载后的回调函数 | — |
| beforeUpdate | 模板更新前的回调函数 | — |
| updated | 模板更新后的回调函数 | — |
| renderGrid | 自定义渲染的回调函数 | {date, el, mode} |
| beforeDestroy | 销毁前的回调函数 | — |
| destroyed | 销毁后的回调函数 | — |
使用
CDN引入
<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("销毁后的回调");
}
})
