Appearance
AtRuler
沈孟平
最后更新于 2025-11-18 14:57:11
一把熬夜写完的尺子， 迭代了许久，希望他有用~
代码演示
基础示例
允许调整选区
固定宽度和步长
自定义样式
刻度吸附
API
AtRuler Props
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
| value | array | [0, 0] | 选中区域的值，数组第一个元素为起始值，第二个元素为结束值 | |
| max | number | 必填项 | 标尺最大值 | |
| height | number | 56 | 标尺高度 | |
| min-gap | number | 20 | 标尺最小间隔，动态计算的时候才有用 | |
| step | number | 'auto' | 'auto' | 步长 | |
| label-gap | number | 5 | 刻度标签隔几个显示 | |
| precision | number | 0 | label 显示精度 | |
| padding | number | 32 | 标尺左右内边距 | |
| selection-area-cls | string | undefined | 选中区域样式 | |
| selection-trigger-cls | string | undefined | 选中区域触发器样式 | |
| selection-trigger-width | number | 3 | 选中区域触发器宽度，自定义触发器或者刻度宽度不是默认时必传 | |
| tooltip-props | Omit<TooltipProps, 'show'> | undefined | 选中区域 NaiveUI Tooltip Props 属性 | |
| cursor-cls | string | undefined | 指针样式 | |
| cursor-text-cls | string | undefined | 指针文本样式 | |
| marker-cls | string | '' | 刻度样式 | |
| marker-active-cls | string | 'bg-blue-500!' | 刻度选中样式 | |
| label-cls | string | undefined | label 样式 | |
| adsorption | boolean | false | 刻度吸附 | |
| allow-adjust-selection | boolean | false | 允许调整现有选区 |
AtRuler Slots
| 名称 | 参数 | 说明 | 版本 |
|---|---|---|---|
| selection-tooltip | () | 选中区域的 tooltip 内容 | |
| selection-trigger | () | 选中区域的触发器 |