Tune UI数值输入框组件
数值输入框是一种特殊的输入框，专门用于输入数字，提供了增减按钮以便用户调整数值。
基础用法
基础数值输入框，支持输入数字并通过控制按钮调整值。
当前值: 0
显示代码
步长设置
通过 step 属性设置数值变化的步长，默认为 1。
步长: 1 (默认)
步长: 5
步长: 10
当前值: 0
显示代码
数值范围限制
通过 min-value 和 max-value 属性限制输入的数值范围。
无限制
最小值: 0
最大值: 100
范围: 0 - 100
显示代码
控制按钮
通过 is-controls 属性控制是否显示增减按钮，默认为 true。
显示控制按钮
隐藏控制按钮
当前值: 0
显示代码
不同尺寸
数值输入框支持三种尺寸：small、default 和 large。
小型
默认
大型
显示代码
范围输入
设置 is-range 属性开启范围输入模式，可同时输入两个数值。
基础范围
限制范围
当前值: [0, 100]
显示代码
数值输入框 API
属性
| 属性名 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| v-model | 绑定值 | number / number[] | — | — |
| size | 尺寸 | string | small / default / large | default |
| placeholder | 占位文本 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| step | 计数器步长 | number | — | 1 |
| min-value | 最小值 | number | — | — |
| max-value | 最大值 | number | — | — |
| is-range | 是否为范围输入 | boolean | — | false |
| is-controls | 是否显示控制按钮 | boolean | — | true |
| debounce | 防抖回调函数 | (value: number / number[]) => void | — | — |
| debounce-delay | 防抖延迟时间(ms) | number | — | 1000 |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| focus | 获取焦点时触发 | (value: number / number[]) |
| blur | 失去焦点时触发 | (value: number / number[]) |
| enter | 按下回车键时触发 | (value: number / number[]) |
| input | 输入值变化时触发 | (value: number / number[]) |
| clear | 点击清空按钮时触发 | — |
插槽
| 插槽名 | 说明 |
|---|---|
| default | 输入框默认内容 |
| spe | 范围选择器的分隔符内容 |
样式变量
数值输入框组件使用了以下样式变量，可通过 SCSS 变量进行自定义：
| 变量名 | 说明 |
|---|---|
| $theme-color-primary | 主题色-主要 |
| $border-color-default | 边框颜色-默认 |
| $text-color-default | 文本颜色-默认 |
| $font-size-small | 字体大小-小 |
| $font-size-default | 字体大小-默认 |
| $font-size-large | 字体大小-大 |