<template>
  <div>
    <div class="bx-list">
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          基础用法
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            v-model="num5"
            :min="1"
            :max="10"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          步数
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            v-model="num6"
            :step="5"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          精度
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            :precision="2"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          全部禁用
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            v-model="num3"
            :disabled="true"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          禁用输入框
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            v-model="num4"
            :disable-input="true"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
      <div class="bx-list-item">
        <div class="bx-list-item-title">
          自定义大小
        </div>
        <div class="bx-list-item-extra">
          <bxs-stepper
            style="width: 240px;height: 80px;"
            v-model="num2"
            @change="changed"
            @plus="plusFn"
            @minus="minusFn"
            @blur="blurFn"
            @focus="focusFn"
            />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num1: 1,
      num2: 1,
      num3: 1,
      num4: 1,
      num5: 1,
      num6: 0,
      num7: 1,
    }
  },
  methods: {
    changed(val) {
      console.log('当绑定值变化时触发: ', val, typeof val)
    },
    plusFn(val) {
      console.log('点击增加按钮时触发: ', val, typeof val)
    },
    minusFn(val) {
      console.log('点击减少按钮时触发: ', val, typeof val)
    },
    blurFn(val) {
      console.log('输入框失去焦点时触发: ', val, typeof val)
    },
    focusFn(val) {
      console.log('输入框获得焦点时触发: ', val, typeof val)
    },
  },
}
</script>
<style>
</style>
