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