65 lines
1.2 KiB
Vue
65 lines
1.2 KiB
Vue
<template>
|
|
<view class="stepper-wrapper">
|
|
<image
|
|
class="stepper-btn stepper-btn-minus"
|
|
src="./images/icon_minus.png"
|
|
mode="aspectFill"
|
|
@click="decrease"
|
|
></image>
|
|
<text class="stepper-text">{{ value }}</text>
|
|
<image
|
|
class="stepper-btn stepper-btn-plus"
|
|
src="./images/icon_plus.png"
|
|
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>
|