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

<script>
export default {
  name: 'KoleInputNumber',
  props: {
    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 }, // 是否禁用
  },
  methods: {
    change: function (value) { this.$emit('input', value); this.$emit('change', value); this.$emit('pagechange', value); }
  },
  // events: change
};
</script>

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