64 lines
1.2 KiB
Vue
64 lines
1.2 KiB
Vue
<template>
|
|
<view class="stepper-wrapper">
|
|
<uni-icons type="minus" size="24" color="#999" @click="decrease" />
|
|
<text class="stepper-text">{{ value }}</text>
|
|
<uni-icons type="plus" size="24" color="#999" @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,
|
|
},
|
|
});
|
|
|
|
// Emit
|
|
const emit = defineEmits(["update:modelValue"]);
|
|
|
|
// 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);
|
|
}
|
|
};
|
|
|
|
const increase = () => {
|
|
if (value.value < props.max) {
|
|
value.value++;
|
|
emit("update:modelValue", value.value);
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
@import "./styles/index.scss";
|
|
</style>
|