OffsetDial
「角度 + 距离」的值(阴影偏移、渐变方向)拖一个圆盘比填两格快。圆心是零偏移,半径对应 maxDistance,拖出圈钳到边上;only-angle 只取角度,距离钉在最大、把手画在边上。
阴影偏移与只取角度的渐变方向
阴影 6, 8(10 · 53°)松手提交 6, 8
方向 90°
v-model是偏移[x, y],y 朝下为正;角度从 +x 起顺时针、落在 [0, 360),与 Figma、PPT 同向。拖圆盘写出的偏移取到一位小数。- 拖动中逐帧
input、松手commit,怎么并成一步撤销归宿主。 - 键盘:左右转角度 5°(Shift 15°),上下改距离 1(Shift 10),
only-angle时上下不动。读屏是slider,念「距离 · 角度」。 - 圆盘大小用
diameter(像素),不叫size——那是全库的控件档位。换算是导出的纯函数offsetPolar/offsetCartesian/dialOffsetAt/dialHandleAt。
API
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue 必填 | [number, number] | — | 偏移 `[x, y]`,y 朝下为正 |
maxDistance | number | undefined | 40 | 圆盘半径对应的偏移量,拖到边上就是它;缺省 40 |
onlyAngle | boolean | undefined | false | 只取角度(渐变方向):距离钉在 `maxDistance`、把手画在边上 |
label 必填 | string | — | 读屏名 |
diameter | number | undefined | 120 | 圆盘直径(像素),缺省 120。不叫 `size`:那是全库的控件档位 |
disabled | boolean | undefined | false | — |
Emits
| 事件 | 载荷 | 说明 |
|---|---|---|
update:modelValue | [value: DialOffset] | — |
input | [value: DialOffset] | — |
commit | [value: DialOffset] | — |