75 lines
3.4 KiB
JSON
75 lines
3.4 KiB
JSON
{
|
||
"slug": "datetimepicker",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 日期时间选择：一个原生 datetime-local 控件同时采集日期与时分。",
|
||
"usage": [
|
||
"prop 名是 value 而事件名是 update:modelValue，两者不配对，所以要用 :value 加 @change 的受控写法，v-model 在本端接不通（DateTimePicker.vue3.vue:13）。",
|
||
"除 update:modelValue 外还并发 change 与 pagechange 两个事件，三者载荷完全相同，新代码只监听 change 即可避免同一动作触发多次副作用（DateTimePicker.vue3.vue:13）。",
|
||
"带固定标签「生效时间」，label 包住 input，可点击文字聚焦（DateTimePicker.vue3.vue:2）。",
|
||
"format 声明默认 YYYY-MM-DD HH:mm 仅作约定，模板不做格式化或校验（DateTimePicker.vue3.vue:9）。",
|
||
"除 update:modelValue 与 change 外还并发 pagechange，载荷同为原生字符串（DateTimePicker.vue3.vue:13）。"
|
||
],
|
||
"bestPractices": [
|
||
"原生 datetime-local 在不同浏览器与系统区域设置下步进不同（有的带秒），落库前建议统一归一化到分钟精度（DateTimePicker.vue3.vue:2）。",
|
||
"控件不会自动补全时区，返回的都是无时区本地串；跨时区业务需要在父组件显式转换（DateTimePicker.vue3.vue:8）。",
|
||
"prop 名与事件不配对，若要绑定到响应式变量请统一使用 :value + @change 模式（DateTimePicker.vue3.vue:13）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是原生 datetime-local 的薄封装：无弹层、无内部状态，format 只作声明；prop value 与事件 update:modelValue 不配对。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "String",
|
||
"desc": "当前值，默认 2026-09-20T09:30；含 T 分隔符"
|
||
},
|
||
{
|
||
"name": "format",
|
||
"type": "String",
|
||
"desc": "格式约定，默认 YYYY-MM-DD HH:mm；当前模板未消费该值"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: String)",
|
||
"desc": "输入变化时回写；需配合 :value 使用"
|
||
},
|
||
{
|
||
"name": "change",
|
||
"type": "emit(payload: String)",
|
||
"desc": "与 update:modelValue 同载荷的独立事件"
|
||
},
|
||
{
|
||
"name": "pagechange",
|
||
"type": "emit(payload: String)",
|
||
"desc": "历史遗留事件，载荷同上"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"label 内联文本「生效时间」为输入框提供了可读名称，原生控件在主流浏览器可键盘输入（DateTimePicker.vue3.vue:2）。",
|
||
"标签文案固定，同一表单里多个 datetime 字段无法凭名称区分，需要业务补 aria-label（DateTimePicker.vue3.vue:2）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/DateTimePicker.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "datetimepicker 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/DateTimePicker.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"datetimepicker-ex-1",
|
||
"datetimepicker-ex-2"
|
||
],
|
||
"notes": [
|
||
"frameworks/DateTimePicker.vue3.vue:8 — 默认值为带 T 的本地串",
|
||
"frameworks/DateTimePicker.vue3.vue:2 — 基于原生 datetime-local 实现",
|
||
"frameworks/DateTimePicker.vue3.vue:9 — format 声明但未参与格式化"
|
||
]
|
||
}
|