Skip to content

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

名称类型默认值版本说明
cstringdefault配置名。使用说明
propsInputNumberPropsundefined全部 props 。 使用说明
c-classHTMLAttributes['class']undefined自定义类名
c-styleHTMLAttributes['style']undefined自定义样式
valuenumberundefined输入框的内容
minnumberundefined最小值
maxnumberundefined最大值
stepnumberundefined每次改变步数
colorstringundefined颜色。 使用说明
sizestring | numberundefined字体的大小。使用说明
input-propsInputPropsundefinedInputProps
plus-button-propsButtonPropsundefinedButtonProps
minus-button-propsButtonPropsundefinedButtonProps
disabledbooleanundefined是否禁用
radiusstring | numberundefined圆角值。 使用说明
roundbooleanundefined是否显示为圆形

InputNumber Methods

名称类型说明
inputRefRef<InstanceType<typeof CInput>>CInput 组件

InputNumber Events

名称参数说明
update:value(value: number) => voidvalue change 时触发
plus(value: number) => void增加事件触发
minus(value: number) => void减少事件触发