<template>
  <view class="step-model"
    :class="[small?'step-model-small':'',disabled&&disablesStyle?'step-disabled':'','step-modal-'+type]"
  >
    <view class="step-control center"
          :style="{color: color}"
          :class="[small?'step-control-small':'',(disabled||showValue<=minValue)&&disablesStyle?'step-disabled':'']"
          @click="reduce"
    >
      <text class="iconfont iconfont-sign"></text>
    </view>
    <input
        type="number"
        class="step-input"
        :class="[small?'step-input-small':'',disabled&&disablesStyle?'step-disabled-input':'']"
        :value="showValue"
        @blur="blur"
        :disabled="disabled || showValue>=maxValue && showValue<=minValue"
        :style="{color: textColor || color}"
    />
    <view class="step-control center"
          :style="{color: color}"
          :class="[small?'step-control-small':'',(disabled||showValue>=maxValue)&&disablesStyle?'step-disabled':'']"
          @click="add">
      <text class="iconfont iconfont-puls"></text>
    </view>


  </view>
</template>

<script>
import mixins from './mixins';
import props from "./props";
export default {
  name: "v-step",
  mixins,
  props
}
</script>

<style scoped lang="scss" src="./style.scss"></style>