qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

InputNumber 输入框

带加减按钮的数字输入框，用户可以控制每次点击增加的数值，支持小数，同时支持自定义输入框宽度。

使用指南

在 Taro 文件中引入组件

import { AtInputNumber } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/input-number.scss";

一般用法

说明：

  • 该组件为受控组件，开发者需要通过 onChange 事件或 v-model:value 来更新 value 值变化。不使用 v-model 时，value 与 onChange 函数必填

  • 由于小程序组件化的限制，AtInputNumber 嵌套在 AtForm 或原生小程序组件 Form 中的时候，onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象，开发者要获取数据，可以自行在页面的 state 中获取

  • 由于此组件是基于小程序的 Input 进行封装，该组件是原生组件，使用前请阅读使用限制

<template>
  <view>
    <!-- 使用 onChange 更新 value 值 -->
    <AtInputNumber
      :width="200"
      :min="0"
      :max="10"
      :step="1"
      :value="value"
      @change="handleNumberChange"
    />
    <!-- 使用 v-model:value -->
    <AtInputNumber
      :width="200"
      :min="0"
      :max="10"
      :step="1"
      v-model:value="value"
    />
  </view>
</template>

<script>
export default {
  name: 'AtInputNumberDemo',
  methods: {
    handleNumberChange(val) {
      this.value = val
    }
  }
}
</script>

小数

<AtInputNumber
  type='digit'
  :min="0"
  :max="10"
  :step="0.1"
  :value="value"
  @change="handleChange"
/>

禁止状态

<AtInputNumber
  disabled
  :min="0"
  :max="10"
  :step="1"
  :value="value"
  @change"handleChange"
/>

禁止输入状态

<AtInputNumber
  disabledInput
  :min="0"
  :max="10"
  :step="1"
  :value="value"
  @change="handleChange"
/>

自定义宽度

<AtInputNumber
  :min="0"
  :max="10"
  :step="1"
  :width="200"
  :value="value"
  @change="handleChange"
/>

使用大尺寸

<AtInputNumber
  size="large"
  :min="0"
  :max="10"
  :step="1"
  :value="value"
  @change="handleChange"
/>

参数

参数微信小程序h5说明类型可选值默认值
type√√输入框类型，type='digit' 时，h5 无法显示数字输入框，若需要数字输入框建议使用 number (v1.5.1 支持)Stringnumber、digitnumber
value√√输入框当前值，支持 v-model, 开发者可通过 v-model:value 或 onChange 事件来更新 value 值Number | String-1
width√√input 宽度,不包括两侧按钮，单位根据环境转为 rpx 或 remNumber-120
min√√最小值Number-0
max√√最大值Number-100
step√√每次点击改变的间隔大小Number-1
size√√组件的大小String'normal' | 'large''normal'
disabled√√是否禁止输入，禁止点击按钮Boolean-false
disabledInput√√是否禁止输入，但不禁止点击按钮Boolean-false

事件

事件名称微信小程序h5说明返回参数
onChange√√输入框值改变时触发的事件，开发者可通过 onChange 事件或 v-model:value 来更新 value 值变化。不使用 v-model 时，onChange 函数必填输入框当前值 value
onUpdate:value√√使用 v-model:value 时自动触发输入框当前值 value
onBlur√√输入框值失去焦点时触发的事件event
onErrorInput√√输入框尝试输入错误数组触发的事件({'{ type: OVER | LOW | DISABLED, errorValue: number}'})