66 lines
3.2 KiB
JSON
66 lines
3.2 KiB
JSON
{
|
||
"slug": "rangequickpicker",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 rangequickpicker：只抛 update:modelValue，确定按钮才提交，因此要用 .sync 或手写 update 监听。",
|
||
"usage": [
|
||
"props 声明的是 `modelValue`（第 56 行），回写只抛 `update:modelValue`（第 79 行），Vue 2 的 `v-model` 走 value 加 input，两边不匹配，所以 `v-model` 静默不生效。",
|
||
"惯用写法是 `:model-value.sync=\"range\"`（.sync 在 Vue 2 里就展开成 update:modelValue 监听），或照示例写 `@update:model-value=\"range = $event\"`。",
|
||
"回写时机是点「确定」：confirm() 抛 `{ start, end }` 对象后立即 close()（第 79-80 行），点「取消」只收起不改外部的值。"
|
||
],
|
||
"bestPractices": [
|
||
"data 里 start/end 只在初始化时读 modelValue（第 71 行），之后外部改 modelValue 不会回填面板，回写要按整对象替换。",
|
||
"`:presets` 支持的字段是 days / len / month / year（内置预设第 60-66 行所示），自定义预设要照这个结构写才会被 presetRange 正确解析。",
|
||
"外点关闭用的是自定义指令 v-click-outside（第 46-53 行，挂在 document 上），多实例同页都能各自收起，无需额外处理。"
|
||
],
|
||
"a11y": [
|
||
"触发器是 div 加 @click，没有 tabindex、role 与键盘处理，键盘用户无法展开面板。",
|
||
"面板内的预设是原生 button 可用键盘，但日期区间用的是两个原生 input[type=date] 且无 label，读屏时缺少「起」「止」区分。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 2 项（modelValue 对象 / presets，frameworks/RangeQuickPicker.vue2.vue:55-69）加一个 update:modelValue 事件；采用 Vue 2 的 .sync 约定而非 v-model。",
|
||
"table": [
|
||
{
|
||
"name": "default",
|
||
"type": "属性",
|
||
"desc": "default：契约层词汇，该端 props 块未声明此属性，不作为 API 使用（frameworks/RangeQuickPicker.vue2.vue:55-69）"
|
||
},
|
||
{
|
||
"name": "modelValue",
|
||
"type": "Object",
|
||
"desc": "双向绑定值（frameworks/RangeQuickPicker.vue2.vue:4）"
|
||
},
|
||
{
|
||
"name": "presets",
|
||
"type": "Array",
|
||
"desc": "快捷预设（frameworks/RangeQuickPicker.vue2.vue:8）"
|
||
},
|
||
{
|
||
"name": "type",
|
||
"type": "属性",
|
||
"desc": "type：契约层词汇，该端 props 块未声明此属性，不作为 API 使用（frameworks/RangeQuickPicker.vue2.vue:55-69）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/RangeQuickPicker.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/RangeQuickPicker.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rangequickpicker-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/RangeQuickPicker.vue2.vue:56-68；唯一 $emit('update:modelValue') 在第 79 行 confirm()。",
|
||
"实测差异：没有 model 选项，v-model 不会生效；示例用 :model-value 配 @update:model-value，故本页按 .sync 口径描述。"
|
||
]
|
||
}
|