InputNumber 数字输入
基本使用
template
<c-input-number v-model:value="value" :min="0" :max="10" />
圆形按钮
template
<c-input-number c="round" />
异步
ts
import { ref } from 'vue'
const value = ref(1)
const loading = ref(false)
const asyncUpdate = (v: number) => {
if (loading.value) return
loading.value = true
uni.showLoading({ title: '异步中' })
setTimeout(() => {
value.value = v
loading.value = false
uni.hideLoading()
}, 1000)
}
template
<c-input-number :value="value" :disabled="loading" :input-props="{ readonly: true }" @minus="asyncUpdate" @plus="asyncUpdate" />
API
InputNumber Props
名称 | 类型 | 默认值 | 版本 | 说明 |
---|---|---|---|---|
c | string | default | 配置名。使用说明 | |
props | InputNumberProps | undefined | 全部 props 。 使用说明 | |
c-class | HTMLAttributes['class'] | undefined | 自定义类名 | |
c-style | HTMLAttributes['style'] | undefined | 自定义样式 | |
value | number | undefined | 输入框的内容 | |
min | number | undefined | 最小值 | |
max | number | undefined | 最大值 | |
step | number | undefined | 每次改变步数 | |
color | string | undefined | 颜色。 使用说明 | |
size | string | number | undefined | 字体的大小。使用说明 | |
input-props | InputProps | undefined | InputProps | |
plus-button-props | ButtonProps | undefined | ButtonProps | |
minus-button-props | ButtonProps | undefined | ButtonProps | |
disabled | boolean | undefined | 是否禁用 | |
radius | string | number | undefined | 圆角值。 使用说明 | |
round | boolean | undefined | 是否显示为圆形 |
InputNumber Methods
名称 | 类型 | 说明 |
---|---|---|
inputRef | Ref<InstanceType<typeof CInput>> | CInput 组件 |
InputNumber Events
名称 | 参数 | 说明 |
---|---|---|
update:value | (value: number) => void | value change 时触发 |
plus | (value: number) => void | 增加事件触发 |
minus | (value: number) => void | 减少事件触发 |