Slider
一维二维同一个组件:v-model 给数字是横向的条,给 [x, y] 是一块面。一维的行为层是 Reka 的 Slider(键盘、aria、拖动、步进吸附);二维 Reka 没有通用原语(ColorArea 只认颜色、只有矩形),自己写,键盘与提交节奏照 Reka:方向键一下一步、Shift 十步。
表单里
show-value 在右侧并排显示当前值,格式缺省按 step 的小数位,format-options 可改(百分比、单位),#value 插槽可整个换掉。step 缺省是全程的 1%。
JPEG 质量 / 百分比 / 禁用
取色器的条与面
画什么由 track(轨道的 CSS background)定:色相渐变、棋盘格垫底的透明度渐变、色盘的叠色;thumb 是圆点里的颜色。给了 track 或 thumb 的圆点是白环加深色外描,落在任何颜色上都分得开。二维的 y 轴自下而上增大(色盘的明度直接对上),尺寸由 class 定;shape="ellipse" 是椭圆容器,指针出了圆,圆点沿中心射线停在边上(色轮上就是色相不变、饱和度到头)。二维要给 value-text,读屏才念得出两个量。
色盘 / 色轮 / 色相 / 透明度
input 0 次 / commit 0 次
提交节奏
拖动中逐帧发 input,松手或按键后发一次 commit;有过 input 就一定有收尾的 commit——Reka 拖回原值时不发 valueCommit,宿主按手势合并撤销的话这一步会一直开着。外面传回的值只刷新显示。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
label | string | undefined | undefined | 读屏名 |
min | number | undefined | 0 | 两个轴共用 |
max | number | undefined | 1 | — |
step | number | undefined | undefined | 拖动吸附与方向键一下的步长,缺省是全程的 1% |
track | string | undefined | undefined | 轨道的 CSS background(色相渐变、棋盘格垫底的透明度渐变、色盘的叠色) |
thumb | string | undefined | undefined | 圆点里填的颜色 |
valueText | string | undefined | undefined | 读屏念的值(缺省念数字;二维一定要给) |
shape | SliderShape | undefined | "rect" | 二维的容器形状 |
showValue | boolean | undefined | false | 一维在右侧并排显示当前值(如 JPEG 质量 0–100),格式见 `formatOptions`;`#value` 插槽可换 |
formatOptions | Intl.NumberFormatOptions | undefined | undefined | 并排数值的 `Intl.NumberFormat` 选项,缺省按 `step` 的小数位 |
locale | string | undefined | undefined | — |
disabled | boolean | undefined | false | — |
size | "mini" | "small" | "medium" | "large" | "super" | undefined | undefined | 尺寸:mini / small / medium(默认) / large / super;不传则跟随环境 data-size |
modelValue 必填 | T | — | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
input | [value: T] | — |
commit | [value: T] | — |
update:modelValue | [value: T] | — |
Slots
| 插槽 | 说明 |
|---|---|
value | — |