first commit

src/components/Stepper/index.vue

@@ -0,0 +1,71 @@
+<template>
+  <view class="stepper-wrapper border-box flex flex-items-center rounded-8">
+    <uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
+    <text class="stepper-text text-center font-size-14 font-500 color-000 ml-4 mr-4">
+      {{ value }} {{ unit }}
+    </text>
+    <uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
+  </view>
+</template>
+
+<script setup>
+import { ref, defineProps, defineEmits, watch } from "vue";
+
+// Props
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    default: 1,
+  },
+  min: {
+    type: Number,
+    default: 1,
+  },
+  max: {
+    type: Number,
+    default: 100,
+  },
+  unit: {
+    type: String,
+    default: "",
+  },
+});
+
+// Emit
+const emit = defineEmits(["update:modelValue", "decrease", "increase"]);
+
+// Local state
+const value = ref(props.modelValue);
+
+// 监听外部值变化，同步更新本地状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    value.value = newValue;
+  },
+  { immediate: true }
+);
+
+// Methods
+const decrease = () => {
+  if (value.value === 1) return;
+
+  if (value.value > props.min) {
+    value.value--;
+    emit("update:modelValue", value.value);
+    emit("decrease");
+  }
+};
+
+const increase = () => {
+  if (value.value < props.max) {
+    value.value++;
+    emit("update:modelValue", value.value);
+    emit("increase");
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "./styles/index.scss";
+</style>