91 lines
3.7 KiB
JSON
91 lines
3.7 KiB
JSON
{
|
||
"slug": "numberrangeinput",
|
||
"end": "vue2",
|
||
"curated": true,
|
||
"summary": "Vue 2 端的 numberrangeinput：两个 number 输入框拼成区间，每次输入都校验并抛 error，合法与否都抛 input。",
|
||
"usage": [
|
||
"`:value` 是长度为二的数组，分别绑到两个原生 number 输入框（第 3、6 行的 :value=\"value[0]\" / \"value[1]\"），回写走 `input`，所以 `v-model` 要绑数组。",
|
||
"onMin 与 onMax 都先把另一个值接上再校验（第 29、34 行），再经 emit() 抛 `input`，因此传出的始终是完整两元组，不会出现只有一半的载荷。",
|
||
"`@error` 的载荷是提示字符串（第 44 行），无错时抛空串，可以只靠它驱动提示区而不读组件内部状态。"
|
||
],
|
||
"bestPractices": [
|
||
"校验规则有三条：上下界越界与最小值大于最大值（第 40-42 行），错误文案直接拼接 min/max 数值，改边界会同时改文案。",
|
||
"`:min` 与 `:max` 默认是 -Infinity 与 Infinity，传字符串边界会让比较退化成意外结果，务必传数字。",
|
||
"`:placeholder` 是二元数组而不是字符串（第 23 行），传单个字符串时两个框都会取不到对应项。"
|
||
],
|
||
"a11y": [
|
||
"两个原生 number 输入框之间只有视觉分隔符，没有 group 语义也没有 aria-label 区分「最小」「最大」，读屏用户分不清哪个是哪个。",
|
||
"错误提示只以 .kole-numrange-msg 文本呈现，没有 aria-live 或 aria-invalid，校验反馈不会被自动播报。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "载体是 props 块 7 项（value/step/min/max/separator/unit/placeholder，frameworks/NumberRangeInput.vue2.vue:16-24）加 input 与 error 两个事件；值固定为两元数组。",
|
||
"table": [
|
||
{
|
||
"name": "max",
|
||
"type": "Number",
|
||
"desc": "最大值（frameworks/NumberRangeInput.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "Number",
|
||
"desc": "最小值（frameworks/NumberRangeInput.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "Array",
|
||
"desc": "占位提示文本（frameworks/NumberRangeInput.vue2.vue:4）"
|
||
},
|
||
{
|
||
"name": "separator",
|
||
"type": "String",
|
||
"desc": "分隔符（frameworks/NumberRangeInput.vue2.vue:5）"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"type": "Number",
|
||
"desc": "步长（frameworks/NumberRangeInput.vue2.vue:3）"
|
||
},
|
||
{
|
||
"name": "unit",
|
||
"type": "String",
|
||
"desc": "unit（frameworks/NumberRangeInput.vue2.vue:8）"
|
||
},
|
||
{
|
||
"name": "value",
|
||
"type": "属性",
|
||
"desc": "长度二的数组，分别绑到两个输入框的 :value（frameworks/NumberRangeInput.vue2.vue:17,3,6）"
|
||
},
|
||
{
|
||
"name": "error",
|
||
"type": "(val: any) => void",
|
||
"desc": "出错时触发（frameworks/NumberRangeInput.vue2.vue:2）"
|
||
},
|
||
{
|
||
"name": "input",
|
||
"type": "事件",
|
||
"desc": "Vue 2 端实现直接消费的 事件。（frameworks/NumberRangeInput.vue2.vue:3）"
|
||
}
|
||
]
|
||
},
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/NumberRangeInput.vue2.vue",
|
||
"kind": "Vue 2",
|
||
"desc": "该端实现（本页 API 与用法的唯一权威来源）。"
|
||
},
|
||
{
|
||
"file": "frameworks/NumberRangeInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件的样式文件，类名口径以它为准。"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"numberrangeinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"props 声明行 frameworks/NumberRangeInput.vue2.vue:17-23；emit 在第 27 行（input）与第 44 行（error）。",
|
||
"data 第 25 行只有 errorMsg，模板第 9 行据此渲染提示，属组件内部状态而非 prop。"
|
||
]
|
||
}
|