stepper props

属性	描述	类型	默认值
value	要绑定的值，可通过v-model绑定	number｜ string	-
currentValue	初始值，当 v-model 为空时生效	number｜ string	0
min	最小值 必须大于0	numbe｜ String	1
max	最大值 必须大于0	number｜ String	Infinity
step	步长 必须大于0	number｜ String	1
inputSize	输入框的宽	number｜ String	32
buttonSize	按钮的大小	number｜ String	28
decimalLength	保留几位小数	number｜ String	-
integer	是否是整数	Boolean	true
disabled	禁用stepper，包括按钮输入框	Boolean	false
disablePlus	禁用增加按钮	Boolean	false
disableMinus	禁用减少按钮	Boolean	false
disableInput	禁用输入按钮	Boolean	false
asyncChange	是否异步变化	Boolean	false
showPlus	展示新增按钮	Boolean	true
showMinus	展示减少按钮	Boolean	true

stepper events

名称	说明	参数
inuput	input事件	newVal
change	change事件	newVal
overlimit	超出限制事件	-
plus	点击新增按钮触发	data
minus	点击减少按钮触发	data
focus	输入框获取焦点触发	event
blur	输入框失去焦点触发	event

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">基础用法</p>
      <vill-stepper v-model="val" @focus="focus" @blur="blur" @minus="minus" @plus="plus" @change="handlechange" @overlimit="overlimit" @input="handleinput"/>
    </div>
    <div class="items">
      <p class="item_title">最大值为8，最小值为2</p>
      <vill-stepper v-model="limitvalue" min="2" max="8"/>
    </div>
    <div class="items">
      <p class="item_title">最大值为8，最小值为0, 步长为2</p>
      <vill-stepper v-model="stepvalue" step="2" min="0" max="8"/>
    </div>
    <div class="items">
      <p class="item_title">开启非整数模式</p>
      <vill-stepper v-model="floatvalue" :integer="false"/>
    </div>
    <div class="items">
      <p class="item_title">开启非整数模式，保留2位小数</p>
      <vill-stepper v-model="floatfiexdvalue" :decimalLength="2" :integer="false"/>
    </div>
    <div class="items">
      <p class="item_title">开启非整数模式, 步长为0.2，min为3，max为4</p>
      <vill-stepper v-model="floatstepvalue" :integer="false" step="0.2" min="3" max="4" />
    </div>
    <div class="items">
      <p class="item_title">禁用计步器</p>
      <vill-stepper :disabled="true" v-model="floatstepvalue" :integer="false" step="0.2" min="3" max="4" />
    </div>
    <div class="items">
      <p class="item_title">禁用计步器的输入框</p>
      <vill-stepper :disableInput="true" v-model="disableInputvalue" :integer="false" step="0.2" min="3" max="4" />
    </div>
    <div class="items">
      <p class="item_title">自定义尺寸</p>
      <vill-stepper buttonSize="40" inputSize="68" v-model="sizevalue" />
    </div>
    <div class="items">
      <p class="item_title">异步跟新数据</p>
      <vill-stepper :value="ayncvalue" :asyncChange="true" @change="change"/>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      val: 2,
      limitvalue: 3,
      stepvalue: 1,
      floatvalue: 1.1,
      floatfiexdvalue: 2.1,
      floatstepvalue: 3.1,
      disableInputvalue: 3,
      sizevalue: 100,
      ayncvalue: 10
    }
  },
  watch: {
    val(newval) {
      console.log('=== val change ===', newval)
    },
    limitvalue(newval) {
      console.log('=== limitvalue change ===', newval)
    }
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    change(data) {
      let loading = this.$loading()
      setTimeout(() => {
        this.ayncvalue = data
        loading.close()
      }, 1000)
    },
    focus(event) {
      console.log('focus', event)
    },
    blur() {
      console.log('blur')
    },
    minus(val) {
      console.log('minus', val)
    },
    plus(val) {
      console.log('plus', val)
    },
    handlechange(val) {
      console.log('handlechange', val)
    },
    handleinput(val) {
      console.log('handleinput', val)
    },
    overlimit() {
      console.log('overlimit')
    }
  }
}
</script>