在uniapp中想写一个获取数字的组件1-20这个要怎么写

在uniapp中，可以通过自定义组件的方式来实现获取数字的功能。下面是一个简单的示例代码：

创建一个名为NumberPicker的自定义组件。

<template>
  <div class="number-picker">
    <button @click="decrease">-</button>
    <input type="number" v-model="value" />
    <button @click="increase">+</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 1
    }
  },
  methods: {
    decrease() {
      if (this.value > 1) {
        this.$emit('input', this.value - 1);
      }
    },
    increase() {
      if (this.value < 20) {
        this.$emit('input', this.value + 1);
      }
    }
  }
};
</script>

<style scoped>
.number-picker {
  display: flex;
  align-items: center;
}

button {
  width: 30px;
  height: 30px;
  border: 1px solid #ccc;
  background-color: #fff;
  cursor: pointer;
}
</style>

在使用该组件的页面中，引入并使用NumberPicker组件。

<template>
  <div>
    <NumberPicker v-model="selectedNumber" />
    <p>选中的数字：{{ selectedNumber }}</p>
  </div>
</template>

<script>
import NumberPicker from '@/components/NumberPicker';

export default {
  components: {
    NumberPicker
  },
  data() {
    return {
      selectedNumber: 1
    };
  }
};
</script>

在上述示例中，NumberPicker组件包含三个部分：一个减号按钮、一个用于显示数字的输入框和一个加号按钮。通过v-model将父组件中的数据与子组件中的value属性进行绑定，实现获取数字的功能。点击减号按钮时，如果当前数字大于1，则通过$emit方法向父组件触发input事件，并将减1后的值传递给父组件；点击加号按钮时，如果当前数字小于20，则通过$emit方法向父组件触发input事件，并将加1后的值传递给父组件。在父组件中，可以使用v-model指令将NumberPicker组件与一个变量进行双向绑定，从而获取选中的数字