Input-number 数字输入框
代码演示
基础用法
input-number梳子输入框组件最基础的用法。
查看代码 < />
<template>
<w-input-number v-model="value"></w-input-number>
</template>
<script>
export default {
data () {
return {
value: 1
}
}
}
</script>隐藏增减按钮
当数字输入框不需要增减按钮时，可以使用hidden-controller属性来将其隐藏掉。
查看代码 < />
<template>
<w-input-number v-model="value" hidden-controller></w-input-number>
</template>
<script>
export default {
data () {
return {
value: 1
}
}
}
</script>自定义增减按钮图标
通过controller-icon属性可以指定增减图标的自定义。
查看代码 < />
<template>
<w-input-number v-model="value"
:controller-icon="['w-icon-arrow-top', 'w-icon-arrow-bottom']"></w-input-number>
</template>
<script>
export default {
data () {
return {
value: 1
}
}
}
</script>禁用状态
为组件添加 disabled 属性即可禁用输入框。
查看代码 < />
<template>
<w-input-number v-model="value" disabled></w-input-number>
</template>
<script>
export default {
data () {
return {
value: 1
}
}
}
</script>尺寸选择
一般地, 推荐使用 size='medium' 以达到精致紧凑的视觉效果, 但仍有不同尺寸 (large / medium / small / mini) 以供选择。
查看代码 < />
<template>
<w-input-number v-model="value1" size="large" placeholder="large"></w-input-number>
<w-input-number v-model="value2" size="medium" placeholder="medium"></w-input-number>
<w-input-number v-model="value3" size="small" placeholder="small"></w-input-number>
<w-input-number v-model="value4" size="mini" placeholder="mini"></w-input-number>
</template>
<script>
export default {
data () {
return {
value1: '',
value2: '',
value3: '',
value4: ''
}
}
}
</script>最值设定
为组件添加 max 和 min 属性即可为input-number设定的 最大值 与 最小值。
查看代码 < />
<template>
<w-input-number v-model="value" :max="4" :min="0"></w-input-number>
</template>
<script>
export default {
data () {
return {
value: ''
}
}
}
</script>小数
input-number的默认增量是 1 , 通过设置 increment 属性可以自定义增量, 也可以通过它设定小数增量的精度。
查看代码 < />
<template>
<w-input-number v-model="value" :increment="0.01"></w-input-number>
</template>
<script>
export default {
data () {
return {
value: 1
}
}
}
</script>严格增量
strict-increment 默认为 false，当设置为 true 时，输入值只能是增量 increment 的倍数。
查看代码 < />
<template>
<w-input-number
v-model="value"
strict-increment
:increment="1.1"
></w-input-number>
</template>
<script>
export default {
data () {
return {
value: null,
}
}
}
</script>API
Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 | Version |
|---|---|---|---|---|---|
| controller-icon | 增减按钮图标(长度为2的数组，分别代表增、减) | Array | — | — | v1.4.2 |
| disabled | 禁用输入框 | Boolean | — | false | |
| label | 输入框关联的label文字 | String | — | — | |
| hidden-controller | 隐藏增减功能按钮 | Boolean | — | — | v1.4.2 |
| is-center | 文字是否居中对齐(默认为居中) | Boolean | — | true | |
| increment | 自定义增量(数值精度) | Number | — | 1 | |
| strict-increment | 严格自增(输入值只能是增量的倍数) | Boolean | — | — | v1.7.9 |
| max | 最大值 | Number | — | — | |
| min | 最小值 | Number | — | — | |
| placeholder | 占位文本 | String | — | — | |
| readonly | 是否只读 | Boolean | — | — | |
| size | 输入框尺寸 | String | medium / small / mini | medium | |
| unit | 单位 | String | — | — |
Methods
| 参数 | 说明 | 回调参数 | Version |
|---|---|---|---|
| blur | 使 input-number 获取焦点 | — | |
| focus | 使 input-number 失去焦点 | — |
Events
| 事件名称 | 说明 | 回调参数 | Version |
|---|---|---|---|
| blur | 失去焦点时触发 | (event: Event) | |
| change | 绑定值被改变时触发 | 当前的值 | |
| decrease | 减少(向下)箭头点击时触发 | 当前的值 | v1.7.8 |
| focus | 获得焦点时触发 | (event: Event) | |
| increase | 增长(向上)箭头点击时触发 | 当前的值 | v1.7.8 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |