@xwink/ui

    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 朝下为正
    maxDistancenumber | undefined40圆盘半径对应的偏移量,拖到边上就是它;缺省 40
    onlyAngleboolean | undefinedfalse只取角度(渐变方向):距离钉在 `maxDistance`、把手画在边上
    label 必填 string—读屏名
    diameternumber | undefined120圆盘直径(像素),缺省 120。不叫 `size`:那是全库的控件档位
    disabledboolean | undefinedfalse—

    Emits

    事件载荷说明
    update:modelValue[value: DialOffset]—
    input[value: DialOffset]—
    commit[value: DialOffset]—