在 Vue 2 中，Element UI 提供了 el-input-number 组件作为计数器组件，用于处理数字输入。而在 Vue 3 中，Element Plus 同样提供了类似的组件，但可能有一些属性、事件或方法的细微差异。下面我将分别介绍 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中 el-input-number 组件的属性、事件和方法，并给出示例。
Vue 2 的 Element UI
el-input-number
属性：
-
value/v-model：绑定值，计数器的值 -
min：允许的最小值 -
max：允许的最大值 -
step：每次增加或减少的数量 -
step-strictly：是否只能按步长增加或减少 -
precision：数值精度 -
disabled：是否禁用计数器 -
controls：是否显示增减按钮 -
controls-position：增减按钮的位置，可以是right或left -
placeholder：占位符 -
size：计数器尺寸，如medium、small、mini -
name：原生 name 属性 - …（其他原生 input 属性）
事件：
-
change：值改变时触发 -
blur：失去焦点时触发 -
focus：获取焦点时触发 -
input：在输入时触发（可能不包括由按钮触发的变化） -
increase：点击增加按钮时触发 -
decrease：点击减少按钮时触发 - …（其他原生 input 事件）
方法：
-
el-input-number本身没有提供方法，但你可以通过事件监听和 Vue 实例的属性来操作它。
示例：
<template>
<el-input-number
v-model="count"
:min="1"
:max="10"
:step="1"
@change="handleChange"
@increase="handleIncrease"
@decrease="handleDecrease">
</el-input-number>
</template>
<script>
export default {
data() {
return {
count: 1
};
},
methods: {
handleChange(value) {
console.log('计数器值改变:', value);
},
handleIncrease(value, oldValue) {
console.log('点击增加按钮，当前值:', value, '，旧值:', oldValue);
},
handleDecrease(value, oldValue) {
console.log('点击减少按钮，当前值:', value, '，旧值:', oldValue);
}
}
};
</script>
Vue 3 的 Element Plus
在 Element Plus 中，el-input-number 组件的使用与 Vue 2 中的 Element UI 类似，但也可能会有一些新增或移除的属性、事件或方法。你应该查阅 Element Plus 的官方文档以获取最新的信息。
属性、事件 和 方法 与 Vue 2 中的 Element UI 大致相同，但可能会有一些变化或增加。
示例（在 Vue 3 中使用 Composition API）：
<template>
<el-input-number
v-model="count"
:min="1"
:max="10"
:step="1"
@change="handleChange"
@increase="handleIncrease"
@decrease="handleDecrease">
</el-input-number>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const count = ref(1);
const handleChange = (value) => {
console.log('计数器值改变:', value);
};
const handleIncrease = (value, oldValue) => {
console.log('点击增加按钮，当前值:', value, '，旧值:', oldValue);
};
const handleDecrease = (value, oldValue) => {
console.log('点击减少按钮，当前值:', value, '，旧值:', oldValue);
};
return {
count,
handleChange,
handleIncrease,
handleDecrease
};
}
};
</script>
请注意，在 Vue 3 的 Composition API 中，我们使用 ref 来创建响应式引用，并将它们作为组件的返回属性。这与 Vue 2 中的 data 函数有所不同。加粗样式