4.7 KiB
4.7 KiB
WC-NUMBER
通过鼠标或键盘输入数字。
基础用法
import '//jscdn.ink/@bd/ui/latest/space/index.js' import '//jscdn.ink/@bd/ui/latest/form/number.js' wc-number{ width:200px; }尺寸大小
5种尺寸规则的输入框, 如果不满足自己的需求, 可以自行设置width和height。
状态
文本框有2种状态, readonly 和 disabled, 这2种状态下, value值都无法被修改。
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
wc-number{ width:250px; }
圆角
round属性, 可以让数字文本框变成圆角。
@163.com
@163.com
wc-number{ width:300px; }
div[slot='prepend']{
padding:0 10px;
border-right:1px solid var(--color-grey-a);
}
div[slot='append']{
padding:0 10px;
border-left:1px solid var(--color-grey-a);
}
设置步数
step属性接受一个Number,设置此值后，鼠标和方向键只能输入步数的倍数
import '//jscdn.ink/@bd/ui/latest/space/index.js'
import '//jscdn.ink/@bd/ui/latest/form/number.js'
wc-number{ width:250px; }
完整APIs
| 属性 | 值类型 | 默认值 | 描述 |
|---|---|---|---|
| value | String | 无 | 输入框绑定值 |
| type | String | 无 | 输入框类型, 仅能决定输入框的颜色, 无额外作用, 可选值有: primary、info、success、warning、default、secondary、danger |
| size | String | default | 输入框尺寸, 可选值有: xxxl、xxl、xl、l、m |
| autofocus | Boolean | false | 输入框的加载状态, 为true时, 输入框会自动获得焦点 |
| disbaled | Boolean | false | 输入框的禁用状态, 为true时, value不可更改 |
| readonly | Boolean | false | 输入框的只读状态, 为true时value不可更改。 |
| round | 无 | 无 | 为输入框设置大圆角半径。 不需要赋值 |
| max | Number | 无 | value最大值 |
| min | Number | 无 | value最小值 |
| step | Number | 无 | 输入框步长 |
| lazy | Number | 0 | 为输入框设置节流防抖, 单位毫秒, 设置一个大于0的值之后, 在指定毫秒之内, 无法多次触发submit，input事件 |
事件
| 事件名 | 说明 | 回调参数 | |
|---|---|---|---|
| input | 输入值时触发 | (event: Event) | |
| submit | 按回车时触发 | (event: Event) |