1. 基本用法:
<InputNumber v-model="numberValue" />
在上述例子中，v-model 用于绑定计数器的值，numberValue 是在 data 中定义的变量。
2. 禁用状态:
<InputNumber v-model="numberValue" disabled />
添加 disabled 属性可以禁用计数器。
3. 设置步长:
<InputNumber v-model="numberValue" :step="2" />
使用 step 属性可以设置增减按钮的步长，默认为 1。
4. 设置最大最小值:
<InputNumber v-model="numberValue" :min="1" :max="10" />
使用 min 和 max 属性可以设置计数器的最小和最大值。
5. 自定义格式化:
<InputNumber v-model="numberValue" :formatter="formatNumber" />
使用 formatter 属性可以自定义数字的显示格式。
methods: {
formatNumber(value) {
return `$ ${value}`; // 示例：在数字前添加美元符号
}
}
6. 自定义解析:
<InputNumber v-model="numberValue" :parser="parseNumber" />
使用 parser 属性可以自定义数字的解析方式。
methods: {
parseNumber(value) {
return value.replace(/\D/g, ''); // 示例：去除非数字字符
}
}
以上是一些常见的 Element-React InputNumber 组件的用法示例。你可以根据具体需求在项目中使用它们，并根据 Element-React 文档进行详细配置和使用说明。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5601/Element-React