70 lines
1.3 KiB
Vue
70 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { ref, defineProps, defineEmits } from 'vue';
|
|
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
minValue: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
maxValue: {
|
|
type: Number,
|
|
default: 100
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['update:modelValue']);
|
|
|
|
const currentValue = ref(props.modelValue);
|
|
|
|
// 加法操作
|
|
const increment = () => {
|
|
if (currentValue.value < props.maxValue) {
|
|
currentValue.value++;
|
|
emit('update:modelValue', currentValue.value);
|
|
}
|
|
};
|
|
|
|
// 减法操作
|
|
const decrement = () => {
|
|
if (currentValue.value > props.minValue) {
|
|
currentValue.value--;
|
|
emit('update:modelValue', currentValue.value);
|
|
}
|
|
};
|
|
const change = () => {
|
|
emit('update:modelValue', currentValue.value);
|
|
};
|
|
</script>
|
|
|
|
|
|
<template>
|
|
<div class="number-input">
|
|
<button @click="decrement" :disabled="currentValue <= minValue">-</button>
|
|
<el-input style="width: 100px" v-model.number="currentValue" :min="minValue" :max="maxValue" @input="change"/>
|
|
<button @click="increment" :disabled="currentValue >= maxValue">+</button>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.number-input {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
button {
|
|
width: 30px;
|
|
height: 30px;
|
|
font-size: 18px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
input {
|
|
width: 60px;
|
|
text-align: center;
|
|
margin: 0 5px;
|
|
}
|
|
</style> |