Stepper

基础渲染

<template>
  <div>
    <d-stepper v-model="value"></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

步长设置

<template>
  <div>
    <d-stepper v-model="value" step="2"></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

限制输入范围

<template>
  <div>
    <d-stepper v-model="value" min="5" max="8"></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

限制输入整数

<template>
  <div>
    <d-stepper v-model="value" integer></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

禁用状态

<template>
  <div>
    <d-stepper v-model="value" disabled></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

异步更新

<template>
  <div>
    <d-stepper v-model="value" async-change @change="onChange"></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    },

    methods: {
      onChange(value) {
        console.log(value);
      },
    },
  };
</script>

圆角风格

<template>
  <div>
    <d-stepper v-model="value" theme="round" disable-input></d-stepper>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        value: 1
      }
    }
  };
</script>

API

属性

名称	说明	类型	默认值
value v-model	当前输入默认值	number | string
integer	是否只允许输入整数	boolean
disabled	是否禁用步进器	boolean
inputWidth	输入框宽度，默认单位为px	number | string
buttonSize	按钮大小以及输入框高度，默认单位为px	number | string
asyncChange	是否开启异步变更，开启后需要手动控制输入值	boolean
disableInput	是否禁用输入框	boolean
min	最小值	number | string	1
max	最大值	number | string	Infinity
step	步长，每次点击时改变的值	number | string	1
defaultValue	初始值，当 v-model 为空时生效	number | string	1
theme	样式风格，可选值为 round	string

插槽

无

事件

名称	说明	参数
change	当绑定值变化时触发的事件	名称 说明 类型 e 回调参数 string
overlimit	点击不可用的按钮时触发	无
plus	点击增加按钮时触发	无
minus	点击减少按钮时触发	无
focus	输入框聚焦时触发	名称 说明 类型 e 回调参数 object
blur	输入框失焦时触发	名称 说明 类型 e 回调参数 object

贡献者

无