72 lines
1.3 KiB
Vue
72 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<view class="input-box">
|
||
|
|
<up-icon
|
||
|
|
name="minus"
|
||
|
|
@click="decrease"
|
||
|
|
:size="14"
|
||
|
|
color="rgba(0,0,0,0.25)"
|
||
|
|
></up-icon>
|
||
|
|
<input
|
||
|
|
class="uni-input"
|
||
|
|
type="number"
|
||
|
|
placeholder="1"
|
||
|
|
v-model="num"
|
||
|
|
@input="handleInput"
|
||
|
|
disabled
|
||
|
|
/>
|
||
|
|
<up-icon
|
||
|
|
name="plus"
|
||
|
|
@click="increase"
|
||
|
|
:size="14"
|
||
|
|
color="rgba(0,0,0,0.25)"
|
||
|
|
></up-icon>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
const props = defineProps<{
|
||
|
|
min: number;
|
||
|
|
max: number;
|
||
|
|
value: number;
|
||
|
|
}>();
|
||
|
|
const emit = defineEmits(["changeValue"]);
|
||
|
|
const num = ref(props.value);
|
||
|
|
const handleInput = (event) => {
|
||
|
|
const value = parseInt(event.target.value);
|
||
|
|
if (!isNaN(value) && value >= 1) {
|
||
|
|
num.value = value;
|
||
|
|
} else {
|
||
|
|
num.value = 1;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const increase = () => {
|
||
|
|
if (num.value < props.max) {
|
||
|
|
num.value++;
|
||
|
|
emit("changeValue", num.value)
|
||
|
|
|
||
|
|
}
|
||
|
|
};
|
||
|
|
const decrease = () => {
|
||
|
|
if (num.value > props.min) {
|
||
|
|
num.value--;
|
||
|
|
emit("changeValue", num.value)
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.input-box {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-items: center;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||
|
|
padding: 0rpx 8rpx;
|
||
|
|
border-radius: 5px;
|
||
|
|
margin: 0rpx 16rpx;
|
||
|
|
.uni-input {
|
||
|
|
text-align: center;
|
||
|
|
max-width: 100rpx;
|
||
|
|
color: rgba(0, 0, 0, 0.75);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|