56 lines
1.1 KiB
Vue
56 lines
1.1 KiB
Vue
<template>
|
|
<div class="flex items-center text-center">
|
|
<button class="btn" :class="btnClassList" @click="dec" :disabled="disabled">-</button>
|
|
<div class="w-10 h-10 flex items-center justify-center font-bold">{{ model }}</div>
|
|
<button class="btn" :class="btnClassList" @click="inc" :disabled="disabled">+</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed} from "vue";
|
|
|
|
const model = defineModel();
|
|
const props = defineProps({
|
|
max: Number,
|
|
size: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
const btnClassList = computed(() => {
|
|
let classList = ['btn'];
|
|
if (props.size) {
|
|
classList.push(`btn-${props.size}`);
|
|
}
|
|
return classList;
|
|
});
|
|
|
|
function inc() {
|
|
if (props.disabled) return;
|
|
|
|
window.Telegram.WebApp.HapticFeedback.selectionChanged();
|
|
|
|
if (props.max && model.value + 1 > props.max) {
|
|
model.value = props.max;
|
|
return;
|
|
}
|
|
|
|
model.value++;
|
|
}
|
|
|
|
function dec() {
|
|
if (props.disabled) return;
|
|
|
|
window.Telegram.WebApp.HapticFeedback.selectionChanged();
|
|
|
|
if (model.value - 1 >= 1) {
|
|
model.value--;
|
|
}
|
|
}
|
|
</script>
|