64 lines
2.7 KiB
JSON
64 lines
2.7 KiB
JSON
{
|
||
"slug": "calendar",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 月历组件，内部维护浏览月份，选中日期通过 input 事件回传 key。",
|
||
"usage": [
|
||
"Vue 2 端 v-model=\"date\" 绑定选中日期字符串，点击单元格派发 input 与 change 传该格的 key。",
|
||
"左右箭头只切换当前浏览的月份，不改 value，属于组件内部状态。",
|
||
"单元格有三种叠加状态类：is-out 表示非本月、is-today 表示今天、is-selected 表示当前选中。",
|
||
"星期表头固定从周日起算（日一二三四五六），不提供周起始配置。"
|
||
],
|
||
"bestPractices": [
|
||
"组件不像日期库那样做跨月补位逻辑，is-out 的格子仍可点击并会派发自己的 key，业务侧需要自行忽略或接受。",
|
||
"value 是字符串 key，格式由实现决定，业务侧不要假设为 ISO 日期再自行格式化。",
|
||
"初始浏览月份取的是当前系统时间（new Date），不能通过 props 预置到其它月份。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "Vue 2 端只有 1 个 prop 与 input/change 两个事件；月份浏览状态完全在组件内部。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String，默认空串",
|
||
"desc": "选中日期的 key，v-model 的接收端"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件，参数为单元格 key",
|
||
"desc": "点击日期格时派发，v-model 依赖它"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "事件，参数为单元格 key",
|
||
"desc": "与 input 同时派发，负载相同"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"日期格是 div，不是 table 结构，缺少表格的行列语义与 grid 角色。",
|
||
"「今天」只有 is-today 类，缺少 aria-current=\"date\"，读屏器读不出今天。",
|
||
"导航按钮是原生 button 但只有 ‹ › 字符，没有 aria-label，读屏器只会念出符号。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Calendar.vue2.vue",
|
||
"kind": "Vue 2 组件实现（Options API 单文件组件）",
|
||
"desc": "Calendar.vue2.vue —— 本端模板、props 声明、事件派发与样式入口"
|
||
},
|
||
{
|
||
"file": "frameworks/Calendar.css",
|
||
"kind": "样式文件",
|
||
"desc": "Calendar.css —— 组件类名与状态类的样式定义，被 .vue2.vue 用 <style src> 引入"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"calendar-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明见 frameworks/Calendar.vue2.vue:22，单行形式。",
|
||
"input 与 change 在 frameworks/Calendar.vue2.vue:66-67 派发。",
|
||
"三种状态类见 frameworks/Calendar.vue2.vue:13，星期表头在第 26 行初始化，从周日起。"
|
||
]
|
||
}
|