Tu View PlusInputNumber 数字输入框
仅允许输入标准的数字值，可定义范围
基础用法
使用 v-model 绑定变量，变量的初始值即为默认值。
<template>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-input-number
placeholder="请输入"
v-model="num1"
:min="1"
:max="10"
@change="handleChange1"
/>
</tu-col>
<tu-col :span="12">
<tu-input-number
placeholder="请输入"
v-model="num2"
:controls="false"
@change="handleChange2"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num1 = ref(1);
const num2 = ref();
const handleChange1 = (value: number) => {
console.log(value);
};
const handleChange2 = (value: number) => {
console.log(value);
};
</script><template>
<tu-row :gutter="20">
<tu-col :span="12">
<tu-input-number
placeholder="请输入"
v-model="num1"
:min="1"
:max="10"
@change="handleChange1"
/>
</tu-col>
<tu-col :span="12">
<tu-input-number
placeholder="请输入"
v-model="num2"
:controls="false"
@change="handleChange2"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num1 = ref(1);
const num2 = ref();
const handleChange1 = (value: number) => {
console.log(value);
};
const handleChange2 = (value: number) => {
console.log(value);
};
</script>禁用状态
设置 disabled 为 true 禁用整个组件，若需要控制数值在某一范围内，可以设置 min 属性和 max 属性， 默认最小值为 0。
<template>
<tu-input-number
placeholder="请输入"
v-model="num"
disabled
@change="handleChange"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
const handleChange = (value: number) => {
console.log(value);
};
</script><template>
<tu-input-number
placeholder="请输入"
v-model="num"
disabled
@change="handleChange"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
const handleChange = (value: number) => {
console.log(value);
};
</script>步进
允许定义递增递减的步进控制，设置 step 属性可以控制步长。
<template>
<tu-input-number placeholder="请输入" v-model="num" :step="2" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(5);
</script><template>
<tu-input-number placeholder="请输入" v-model="num" :step="2" />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(5);
</script>严格步进
设置 step-strictly 属性为 true，则只能输入步进的倍数。
<template>
<tu-input-number placeholder="请输入" v-model="num" :step="2" step-strictly />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(5);
</script><template>
<tu-input-number placeholder="请输入" v-model="num" :step="2" step-strictly />
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(5);
</script>精度
设置 precision 属性可以控制数值精度。
<template>
<tu-input-number
placeholder="请输入"
v-model="num"
:precision="2"
:step="0.1"
:max="10"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
</script><template>
<tu-input-number
placeholder="请输入"
v-model="num"
:precision="2"
:step="0.1"
:max="10"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
</script>按钮位置
设置 controls-position 属性为 right 可以控制按钮位置为右侧。
<template>
<tu-input-number
placeholder="请输入"
v-model="num"
:min="1"
:max="10"
controls-position="right"
@change="handleChange"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
const handleChange = (value: number) => {
console.log(value);
};
</script><template>
<tu-input-number
placeholder="请输入"
v-model="num"
:min="1"
:max="10"
controls-position="right"
@change="handleChange"
/>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const num = ref(1);
const handleChange = (value: number) => {
console.log(value);
};
</script>不同尺寸
tu-input-number 组件提供除了默认值 medium 以外的三种尺寸。额外的尺寸：large、small、mini，通过设置 size 属性来配置它们。
<template>
<tu-row :gutter="20" class="demo-input-row mb-2">
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue1"
size="mini"
placeholder="请输入"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue2"
size="small"
placeholder="请输入"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number v-model="inputNumberValue3" placeholder="请输入" />
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue4"
size="large"
placeholder="请输入"
/>
</tu-col>
</tu-row>
<tu-row :gutter="20" class="demo-input-row">
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue1"
size="mini"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue2"
size="small"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue3"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue4"
size="large"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputNumberValue1 = ref();
const inputNumberValue2 = ref();
const inputNumberValue3 = ref();
const inputNumberValue4 = ref();
</script>
<style>
.demo-input-row {
align-items: baseline;
}
</style><template>
<tu-row :gutter="20" class="demo-input-row mb-2">
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue1"
size="mini"
placeholder="请输入"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue2"
size="small"
placeholder="请输入"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number v-model="inputNumberValue3" placeholder="请输入" />
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue4"
size="large"
placeholder="请输入"
/>
</tu-col>
</tu-row>
<tu-row :gutter="20" class="demo-input-row">
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue1"
size="mini"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue2"
size="small"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue3"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
<tu-col :span="6">
<tu-input-number
v-model="inputNumberValue4"
size="large"
placeholder="请输入"
controls-position="right"
/>
</tu-col>
</tu-row>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const inputNumberValue1 = ref();
const inputNumberValue2 = ref();
const inputNumberValue3 = ref();
const inputNumberValue4 = ref();
</script>
<style>
.demo-input-row {
align-items: baseline;
}
</style>InputNumber API
InputNumber Attributes
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | String Number | - |
| size | 数字输入框尺寸 | String | medium |
| disabled | 是否禁用 | Boolean | - |
| readonly | 原生 readonly 属性，是否只读 | Boolean | false |
| min | 设置允许输入的最小值 | Number | -Infinity |
| max | 设置允许输入的最大值 | Number | Infinity |
| step | 步长 | Number | 1 |
| step-strictly | 是否只能输入 step 的倍数 | Boolean | false |
| precision | 数值精度 | Number | - |
| controls | 是否使用控制按钮 | Boolean | true |
| controls-position | 控制按钮位置 | String | right |
| name | 原生属性 | String | - |
| label | 原生属性 | String | - |
| placeholder | 数字输入框占位文本 | String | - |
| id | 等价于原生 input id 属性 | String | - |
| value-on-clear | 当输入框被清空时显示的值 | Number Null String | |
| validate-event | 是否触发表单验证 | Boolean | true |
InputNumber Events
| 事件名 | 描述 | 参数 |
|---|---|---|
| change | 绑定值被改变时触发 | Function |
| blur | 在组件 Input 失去焦点时触发 | Function |
| focus | 在组件 Input 获得焦点时触发 | Function |
InputNumber Exposes
| 参数名 | 描述 | 类型 |
|---|---|---|
| focus | Input元素获得焦点 | Function |
| blur | Input元素失去焦点 | Function |