feat: 步进器组件封装

components/Stepper/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <view class="stepper-wrapper">
+    <image
+      class="stepper-btn stepper-btn-minus"
+      src="./images/icon_minus.webp"
+      mode="aspectFill"
+      @click="decrease"
+    ></image>
+    <text class="stepper-text">{{ value }}</text>
+    <image
+      class="stepper-btn stepper-btn-plus"
+      src="./images/icon_plus.webp"
+      mode="aspectFill"
+      @click="increase"
+    ></image>
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits } from "vue";
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+});
+
+// Emit
+const emit = defineEmits(["update:modelValue"]);
+
+// Local state
+const value = ref(props.modelValue);
+
+// Methods
+const decrease = () => {
+  if (value.value === 1) return;
+
+  if (value.value > props.min) {
+    value.value--;
+    emit("update:modelValue", value.value);
+  }
+};
+
+const increase = () => {
+  if (value.value < props.max) {
+    value.value++;
+    emit("update:modelValue", value.value);
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>