113 lines
5.2 KiB
JSON
113 lines
5.2 KiB
JSON
{
|
||
"slug": "slider",
|
||
"end": "react",
|
||
"curated": true,
|
||
"summary": "滑块：value 给数值或区间，range 等为布尔 props，拖拽与输入都回调 onChange。",
|
||
"usage": [
|
||
"React 端一条组件覆盖单值与区间两种形态：range 为真时 value/defaultValue 是 [lo, hi] 数组（Slider.jsx:23,31,51-53）。",
|
||
"拖拽用指针事件实现：按下时挂载 window 上的 pointermove/pointerup，抬起后移除（Slider.jsx:63-69）。",
|
||
"点击轨道也可改值，且会选距离更近的手柄：range 模式下比较两端距离决定拖哪个（Slider.jsx:70-79）。",
|
||
"showInput 打开后渲染受控的数字输入框，与滑块共享同一份 value，输入即联动（Slider.jsx:81-89,123-134）。",
|
||
"刻度数量由 min/max/step 推导，而不是手工传刻度数组：Array.from 生成 tickPercents（Slider.jsx:97-100）。"
|
||
],
|
||
"bestPractices": [
|
||
"step 必须能整除量程方向上的取值，clamp 里用 Math.round 归一到步长，非整除会导致末值取不到 max（Slider.jsx:35-36）。",
|
||
"range 模式下区间始终升序：赋值后组件会 sort，父组件不必自己保证顺序（Slider.jsx:52,75）。",
|
||
"showInput 的数字框没有额外的空值保护，输入空字符串会被转成 NaN，业务侧应在 onChange 里做兜底。"
|
||
],
|
||
"apiCarrier": {
|
||
"kind": "props",
|
||
"note": "React 端的 API 载体是 props 与回调：属性驱动外观（type/size/disabled 等布尔与枚举），交互经 onXxx 回传（如 onChange/onClick/onSelectionChange）；没有 v-model，受控组件固定写成 value + onChange，非受控则用 defaultValue。",
|
||
"table": [
|
||
{
|
||
"name": "value",
|
||
"type": "number | [number, number]",
|
||
"desc": "受控值，区间模式下为两元素数组"
|
||
},
|
||
{
|
||
"name": "defaultValue",
|
||
"type": "number | [number, number]",
|
||
"desc": "非受控初始值"
|
||
},
|
||
{
|
||
"name": "min",
|
||
"type": "number",
|
||
"desc": "最小值，默认 0"
|
||
},
|
||
{
|
||
"name": "max",
|
||
"type": "number",
|
||
"desc": "最大值，默认 100"
|
||
},
|
||
{
|
||
"name": "step",
|
||
"type": "number",
|
||
"desc": "步长，取值会按它归一"
|
||
},
|
||
{
|
||
"name": "range",
|
||
"type": "boolean",
|
||
"desc": "双滑块区间模式"
|
||
},
|
||
{
|
||
"name": "showTicks",
|
||
"type": "boolean",
|
||
"desc": "显示刻度"
|
||
},
|
||
{
|
||
"name": "showInput",
|
||
"type": "boolean",
|
||
"desc": "显示联动的数值输入框"
|
||
},
|
||
{
|
||
"name": "disabled",
|
||
"type": "boolean",
|
||
"desc": "禁用拖拽与输入"
|
||
},
|
||
{
|
||
"name": "onChange",
|
||
"type": "(value) => void",
|
||
"desc": "值变化回调，拖拽与输入框共用"
|
||
}
|
||
]
|
||
},
|
||
"a11y": [
|
||
"滑块本体是 div 而非 input[type=range]（Slider.jsx:104-121），无 role=\"slider\"、无 aria-valuenow/aria-valuemin/aria-valuemax，键盘与读屏都无法操作。",
|
||
"range 模式下两个手柄都是无标签的 div，视觉用户只能靠位置判断，是明确的可访问性缺口。",
|
||
"showInput 渲染的原生数字输入框是唯一可键盘操作与可读屏的入口，需要无障碍支持时应打开它。"
|
||
],
|
||
"resources": [
|
||
{
|
||
"file": "frameworks/Slider.jsx",
|
||
"kind": "React（React）",
|
||
"desc": "React 端组件实现源码，props 与回调的唯一定义处"
|
||
},
|
||
{
|
||
"file": "frameworks/Slider.css",
|
||
"kind": "样式",
|
||
"desc": "该 React 实现依赖的样式文件"
|
||
}
|
||
],
|
||
"exampleIds": [
|
||
"slider-ex-1",
|
||
"slider-ex-2",
|
||
"slider-ex-3",
|
||
"slider-ex-4"
|
||
],
|
||
"notes": [
|
||
"frameworks/Slider.jsx:9 中可指到 value（number | [number, number]）——受控值，区间模式下为两元素数组",
|
||
"frameworks/Slider.jsx:9 中可指到 defaultValue（number | [number, number]）——非受控初始值",
|
||
"frameworks/Slider.jsx:10 中可指到 min（number）——最小值，默认 0",
|
||
"frameworks/Slider.jsx:10 中可指到 max（number）——最大值，默认 100",
|
||
"frameworks/Slider.jsx:10 中可指到 step（number）——步长，取值会按它归一",
|
||
"frameworks/Slider.jsx:11 中可指到 range（boolean）——双滑块区间模式",
|
||
"frameworks/Slider.jsx:12 中可指到 showTicks（boolean）——显示刻度",
|
||
"frameworks/Slider.jsx:13 中可指到 showInput（boolean）——显示联动的数值输入框",
|
||
"frameworks/Slider.jsx:14 中可指到 disabled（boolean）——禁用拖拽与输入",
|
||
"frameworks/Slider.jsx:15 中可指到 onChange（(value) => void）——值变化回调，拖拽与输入框共用",
|
||
"props 解构清单见 frameworks/Slider.jsx:17-28；本文件 table 只列该端真正消费的属性与回调。",
|
||
"过滤口径：事实包 consumedApi 里还包含绑在组件内部节点上的同名处理器（如 onClick/onChange 绑在内部 button、input、checkbox 上，见 frameworks/Slider.jsx 全文），它们不是对外 props，因此未进 table。",
|
||
"table 构成核验：10 行中 10 行是 frameworks/Slider.jsx 解构出的顶层 props（解构块 frameworks/Slider.jsx:17-28）；本组件 table 全部为顶层 props。"
|
||
]
|
||
}
|