Skip to content

InputNumber

基础用法

数字

<template>
  <ai-form ref="formEl" :model="formInfo" :formConfig="formConfig"></ai-form>
</template>

<script setup>
import { reactive, computed } from 'vue'

const formInfo = reactive({
  number: '',
})

const formConfig = computed(() => {
  return [
    {
      key: 'number',
      label: '数字',
      type: 'input-number',
      model: 'number',
      prop: 'number',
      required: true
    },
  ]
})
</script>

Props

属性说明类型默认值
typeinput-numberstring-
key配置列表唯一标识string-
label标签文本string-
model属性名,它可以是属性的路径(如a.b.0)也可以是一个方法,返回属性路径,该属性是必填的string/Function-
prop一般和属性名保持一致,在使用了validateresetFields的方法时,该属性是必填的string/Function-
width宽度(1-24)number12
noneLabel是否隐藏标签booleanfalse
placeholder输入框占位文本string-
disabled是否禁用boolean/Functionfalse
size输入框尺寸string-
required是否必填booleanfalse
min原生属性,设置最小值number-
max原生属性,设置最大值number-
regExp自定义正则校验string-
regMsg自定义正则校验错误信息string-
validator自定义校验方法Function-
step计数器步长number1
stepStrictly是否只能输入step的倍数booleanfalse
precision数值精度number-
readonly是否只读booleanfalse
controls是否使用控制按钮booleantrue
controlsPosition控制按钮位置string-
showErrorTooltip是否展示错误提示booleantrue
changeFun当绑定值变化时触发的回调函数Function-
showFun是否展示的判断函数,返回一个booleanFunction-