要使用它,只需要在元素中使用v-model
绑定变量即可,变量的初始值即为默认值。
禁用状态
disabled
属性接受一个Boolean
,设置为true
即可禁用整个组件,如果你只需要控制数值在某一范围内,可以设置min
属性和max
属性,不设置min
和max
时,最小值为 0。
<template>
<el-input-number v-model="num" :disabled="true"></el-input-number>
</template>
export default {
data() {
return {
num: 1
}
}
</script>
步数
设置step
属性可以控制步长,接受一个Number
。
step-strictly
属性接受一个。如果这个属性被设置为true
,则只能输入步数的倍数。
<template>
<el-input-number v-model="num" :step="2" step-strictly></el-input-number>
</template>
<script>
export default {
data() {
return {
num: 2
}
}
};
</script>
精度
设置 precision
属性可以控制数值精度,接收一个 Number
。
precision
的值必须是一个非负整数,并且不能小于 step
的小数位数。
尺寸
额外提供了 medium
、small
、mini
三种尺寸的数字输入框
<template>
<el-input-number v-model="num1"></el-input-number>
<el-input-number size="medium" v-model="num2"></el-input-number>
<el-input-number size="small" v-model="num3"></el-input-number>
<el-input-number size="mini" v-model="num4"></el-input-number>
</template>
<script>
export default {
data() {
return {
num1: 1,
num2: 1,
num3: 1,
num4: 1
}
}
};
</script>
设置 controls-position
属性可以控制按钮位置。