94 lines
4.1 KiB
JSON
94 lines
4.1 KiB
JSON
{
|
||
"slug": "numberrangeinput",
|
||
"end": "vue3",
|
||
"curated": true,
|
||
"summary": "Vue 3 数值区间输入：最小与最大两个数字框，带步长、范围校验与错误事件。",
|
||
"usage": [
|
||
"v-model 绑定长度为 2 的数组，如 [\"1\",\"100\"]；每次输入都 emit(\"update:modelValue\", arr) 回写整个数组（NumberRangeInput.vue3.vue:39）。",
|
||
"校验失败时额外 emit(\"error\", err)，参数是中文错误串；err 为空字符串表示校验通过（NumberRangeInput.vue3.vue:34）。",
|
||
"placeholder 是数组，按 [最小值框, 最大值框] 顺序取用，默认 [\"最小\",\"最大\"]（NumberRangeInput.vue3.vue:22）。",
|
||
"min/max 默认是 -Infinity / Infinity，不传则不做边界限制；step 直接透传给原生 number 输入框（NumberRangeInput.vue3.vue:17）。",
|
||
"unit 非空时会在两个输入框右侧追加单位文本，纯展示不参与校验（NumberRangeInput.vue3.vue:8）。"
|
||
],
|
||
"bestPractices": [
|
||
"校验逻辑用 parseFloat 比较，空串会被跳过；因此「只填最小值」不会触发 最小值不能大于最大值 这条规则（NumberRangeInput.vue3.vue:30）。",
|
||
"错误只以 errorMsg 文本 + is-error 类表达，没有把校验结果放进 update:modelValue；需要拦截提交时请自行监听 @error（NumberRangeInput.vue3.vue:2）。",
|
||
"两个输入框分别只回写自己那一端，另一端取 props.modelValue 的旧值，父组件必须在同一次事件里完成整体替换，否则会丢字符（NumberRangeInput.vue3.vue:37）。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "本端是「modelValue 数组 + 独立 error 事件」的组合：错误信息不进入 v-model，而是走单独的 error 通道。",
|
||
"table": [
|
||
{
|
||
"name": "modelValue",
|
||
"type": "Array",
|
||
"desc": "长度为 2 的字符串数组 [最小, 最大]，默认 [\"\", \"\"]"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"type": "Number",
|
||
"desc": "原生 number 输入的步长，默认 1"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "Number",
|
||
"desc": "允许的最小值，默认 -Infinity 即不限制"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"type": "Number",
|
||
"desc": "允许的最大值，默认 Infinity 即不限制"
|
||
},
|
||
{
|
||
"name": "separator",
|
||
"type": "String",
|
||
"desc": "两框之间的分隔符文本，默认「—」"
|
||
},
|
||
{
|
||
"name": "unit",
|
||
"type": "String",
|
||
"desc": "输入框右侧单位文本，默认空串"
|
||
},
|
||
{
|
||
"name": "placeholder",
|
||
"type": "Array",
|
||
"desc": "[最小框, 最大框] 的占位文案，默认 [\"最小\",\"最大\"]"
|
||
},
|
||
{
|
||
"name": "update:modelValue",
|
||
"type": "emit(payload: Array)",
|
||
"desc": "任一侧输入时回写新数组"
|
||
},
|
||
{
|
||
"name": "error",
|
||
"type": "emit(payload: String)",
|
||
"desc": "校验信息，空串代表通过"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"两个 number 输入框都没有 label 与 aria-label，只能靠 placeholder 提供信息，占位一旦被输入内容覆盖就没有可读名称（NumberRangeInput.vue3.vue:3）。",
|
||
"错误提示 span 只挂在 is-error 类下，没有 role=\"alert\" 或 aria-live，出现错误时读屏不会主动播报（NumberRangeInput.vue3.vue:9）。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/NumberRangeInput.vue3.vue",
|
||
"kind": "Vue 3 组件",
|
||
"desc": "numberrangeinput 的 Vue 3（<script setup>）实现源码"
|
||
},
|
||
{
|
||
"file": "frameworks/NumberRangeInput.css",
|
||
"kind": "样式",
|
||
"desc": "该组件在 PC 端共用的样式表"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"numberrangeinput-ex-1"
|
||
],
|
||
"notes": [
|
||
"frameworks/NumberRangeInput.vue3.vue:16 — defineProps 的区间数组与 step/min/max/separator/unit/placeholder",
|
||
"frameworks/NumberRangeInput.vue3.vue:24 — 双向事件与独立 error 事件",
|
||
"frameworks/NumberRangeInput.vue3.vue:27 — 边界与大小关系校验，结果写入 errorMsg 并 emit error"
|
||
]
|
||
}
|