71 lines
3.0 KiB
JSON
71 lines
3.0 KiB
JSON
{
|
||
"slug": "datetimepicker",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 datetimepicker：单个原生 input[type=datetime-local]，改值后把同一个字符串抛进三个事件。",
|
||
"usage": [
|
||
"`:value` 直接落到原生控件的 :value（第 2 行），配合 `@input` 走 change() 抛 `input`，因此 `v-model` 这条路是通的。",
|
||
"change() 一处抛三（第 13 行）：`input`、`change`、`pagechange` 载荷完全相同，都是 datetime-local 的原始字符串。",
|
||
"`:format` 在模板里没有任何绑定点，实现不做格式化也不弹面板，显示格式由浏览器对 datetime-local 的实现决定。"
|
||
],
|
||
"bestPractices": [
|
||
"原生 datetime-local 的 value 形如 2026-09-20T09:30，带 T 且不含秒，传入带秒或空格的字符串会显示为空。",
|
||
"组件无内部状态，父组件不回写 value 时控件仍会在浏览器层显示用户刚选的值，容易误判为已受控，接入时务必回写。"
|
||
],
|
||
"a11y": [
|
||
"外层 <label> 提供了「选择值」文本，原生控件自带键盘输入与增减语义，无需额外补 role。",
|
||
"实现未设置 aria-label 或 name，多个时间控件同页时建议在外部包一层带文本的 label 以区分。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 2 项（value/format，frameworks/DateTimePicker.vue2.vue:8-11）加 input、change、pagechange 三个事件；只有 value 进入模板。",
|
||
"table": [
|
||
{
|
||
"name": "format",
|
||
"type": "属性",
|
||
"desc": "实现声明了这个 prop（String，默认 YYYY-MM-DD HH:mm，注释「格式」），模板未做任何绑定（frameworks/DateTimePicker.vue2.vue:10）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "String",
|
||
"desc": "绑定值（frameworks/DateTimePicker.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "(val: any) => void",
|
||
"desc": "值变化时触发（frameworks/DateTimePicker.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/DateTimePicker.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "pagechange",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/DateTimePicker.vue2.vue:13）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DateTimePicker.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/DateTimePicker.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"datetimepicker-ex-1",
|
||
"datetimepicker-ex-2"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/DateTimePicker.vue2.vue:9-10；三连 emit 在第 13 行，模板第 2 行是唯一消费点。",
|
||
"契约把 format 写成可配置项，但实现未消费，改 format 不会改变显示，属于按实现写的差异点。"
|
||
]
|
||
}
|