8312273696
Standardize Tailwind CSS usage across the codebase: replace legacy shorthand utilities with modern syntax, update color classes to use bracket notation, fix margin/padding units, delete unused CreateServiceOrder SCSS stylesheet and image asset, and resolve minor style inconsistencies.
72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
<template>
|
|
<div class="stepper-wrapper flex items-center rounded-[8px]">
|
|
<uni-icons type="minus" size="24" color="#D1D1D1" @click="decrease" />
|
|
<text class="stepper-text text-center text-[14px] font-medium text-black ml-4 mr-[4px]">
|
|
{{ value }} {{ unit }}
|
|
</text>
|
|
<uni-icons type="plus" size="24" color="#198CFF" @click="increase" />
|
|
</div>
|
|
</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>
|