<template>
  <div class="kole-inputnumber kole-inputnumber-input-row"><button class="kole-inputnumber-action" type="button" @click="change(Number(props.value) - props.step)">−</button><input class="kole-inputnumber-control kole-inputnumber-number" type="number" :value="props.value" :min="props.min" :max="props.max" :step="props.step" :disabled="props.disabled" @input="change(Number($event.target.value))" /><button class="kole-inputnumber-action" type="button" @click="change(Number(props.value) + props.step)">+</button></div>
</template>

<script setup>
import { ref, computed } from 'vue';
const props = defineProps({
    value: { type: Number, default: 1 }, // 绑定值
    min: { type: Number, default: 0 }, // 最小值
    max: { type: Number, default: 100 }, // 最大值
    step: { type: Number, default: 1 }, // 步长
    precision: { type: Number, default: 0 }, // 精度（小数位）
    disabled: { type: Boolean, default: false }, // 是否禁用
});
const emit = defineEmits(["change"]);

function change(value) { emit('update:modelValue', value); emit('change', value); emit('pagechange', value); }
</script>

<style src="./InputNumber.css"></style>
