vue3封装数字滚动组件

Vue3中封装数字滚动组件通常是为了复用一个可以滚动显示数字的功能模块。这个过程涉及创建一个自定义的Vue组件，它可以接受一些属性如最小值、最大值、初始值等，并通过响应式绑定数据，实现数字的动态滚动。

下面是一个简单的步骤示例：

1. **创建组件**：首先，创建一个新的文件`NumberScroll.vue`，并定义一个名为`NumberScroll`的Vue组件。

<template>
  <div class="number-scroll">
    <input type="number" :value="value" :min="min" :max="max" @input="updateValue">
    <button @click="scroll">滚动</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0,
    },
    min: {
      type: Number,
      required: true,
    },
    max: {
      type: Number,
      required: true,
    },
  },
  methods: {
    updateValue(e) {
      this.value = e.target.value;
    },
    scroll() {
      // 滚动逻辑，比如增加或减少值
      if (this.value < this.max) {
        this.value++;
      } else if (this.value > this.min) {
        this.value--;
      }
    },
  },
};
</script>

<style scoped>
.number-scroll {
  /* 样式 */
}
</style>

2. **在父组件中使用**：然后，在需要使用滚动组件的地方导入并使用它，传入相应的属性值。

<template>
  <div>
    <NumberScroll v-bind:value="currentValue" v-bind:min="minValue" v-bind:max="maxValue" />
  </div>
</template>

<script>
import NumberScroll from '@/components/NumberScroll.vue';

export default {
  components: { NumberScroll },
  data() {
    return {
      currentValue: 0,
      minValue: 1,
      maxValue: 100,
    };
  },
  // ...其他组件逻辑
};
</script>