65 lines
3.4 KiB
JSON
65 lines
3.4 KiB
JSON
{
|
||
"slug": "rangequickpicker",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 时间范围快捷选择器：预设按钮与自定义起止日期结合，确认后一次性回写区间对象。",
|
||
"usage": [
|
||
"用 v-model 绑定对象 { start, end }，组件只在点「确定」时 emit(\"update:modelValue\")，预设与自定义输入都先落在内部 start/end 上（RangeQuickPicker.vue3.vue:73）。",
|
||
"presets 每项可写 days、len、month、year 四类字段，如 { label: \"近7天\", days: -6 }；计算公式在 presetRange 里统一处理（RangeQuickPicker.vue3.vue:36）。",
|
||
"内置预设共 7 个（今天/昨天/近7天/近30天/本月/上月/本年），不传 presets 即可直接使用（RangeQuickPicker.vue3.vue:50）。",
|
||
"面板里的自定义区间是原生 input type=\"date\"，输出固定为 YYYY-MM-DD 字符串，与预设结果同格式（RangeQuickPicker.vue3.vue:34）。",
|
||
"点「取消」只收面板，不会回滚已选中的内部值；要丢弃改动只能不进面板重新选（RangeQuickPicker.vue3.vue:77）。"
|
||
],
|
||
"bestPractices": [
|
||
"内部 start/end 由 props.modelValue 一次性初始化，之后不 watch：父组件在外部改动区间时，面板里的输入框不会跟着变（RangeQuickPicker.vue3.vue:65）。",
|
||
"modelValue 必须是含 start/end 的对象，default 是 { start: \"\", end: \"\" }，传 undefined 会在初始化时抛错（RangeQuickPicker.vue3.vue:47）。",
|
||
"收起监听注册在 onMounted、移除在 onBeforeUnmount，且是冒泡阶段；放在自带 stopPropagation 的浮层里需自行验证收起行为（RangeQuickPicker.vue3.vue:80）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端只有 modelValue 一个双向载体，defineEmits 仅声明 update:modelValue，没有 change 事件；确认前不产生任何回写。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "Object",
|
||
"desc": "{ start, end } 日期区间字符串，默认 { start: \"\", end: \"\" }；仅在确定时回写"
|
||
},
|
||
{
|
||
"name": "presets",
|
||
"type": "Array",
|
||
"desc": "预设按钮配置，支持 days/len/month/year 字段，默认 7 项"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: { start, end })",
|
||
"desc": "点「确定」时触发，载荷为当前内部区间"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"触发器是 div + @click，没有 tabindex 与 role，键盘用户不能打开预设面板（RangeQuickPicker.vue3.vue:3）。",
|
||
"两个日期输入框没有 label，仅靠原生控件语义；预设按钮用真实 button 元素，可键盘 Tab 与回车触发（RangeQuickPicker.vue3.vue:9）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/RangeQuickPicker.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "rangequickpicker 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/RangeQuickPicker.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"rangequickpicker-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/RangeQuickPicker.vue3.vue:47 — modelValue 为区间对象",
|
||
"frameworks/RangeQuickPicker.vue3.vue:61 — 只声明 update:modelValue，无 change",
|
||
"frameworks/RangeQuickPicker.vue3.vue:36 — 预设区间计算：days/len/month/year 四类规则",
|
||
"frameworks/RangeQuickPicker.vue3.vue:73 — 确定时才 emit update:modelValue，随后 close"
|
||
]
|
||
}
|