Stepper 步进器

效果

使用方法

<template>
  <div style="background:#f6f6f6">
    <lc-title title="步进器"></lc-title>
    <category title="默认用法"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper @focus="focus" @blur="blur" :value.sync="val1" :max="12" :step="0.1" :decimalPlaces="1" @add="add" @change="change" @reduce="reduce"></lc-stepper>
        </span>
        <span slot="desc">
          value: {{val1}} 
          <!-- <button @click="reduce" class="demo-btn">-</button> <button @click="add" class="demo-btn">+</button>  -->
        </span>
      </lc-cell>
    </div>

    <category title="设置最大最小值"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper :value.sync="val2" :min="5" :max="100"></lc-stepper>
        </span>
      </lc-cell>
    </div>

    <category title="设置加减的步长"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper :value.sync="val3" :step="5"></lc-stepper>
        </span>
      </lc-cell>
    </div>

    <category title="设置只读"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper :value.sync="val4" readonly></lc-stepper>
        </span>
      </lc-cell>
    </div>

    <category title="显示边框"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper :value.sync="val5" :simple="false"></lc-stepper>
        </span>
      </lc-cell>
    </div>

    <category title="关闭动画过渡"></category>
    <div>
      <lc-cell>
        <span slot="title">
          <lc-stepper :value.sync="val6" :transition="false" :simple="false" :max="999"></lc-stepper>
        </span>
      </lc-cell>
    </div>
    
  </div>
</template>

<script>
import LcTitle from '_mods/title.vue';
import Category from '_mods/category.vue';
export default {
  components: { LcTitle, Category },
  data() {
    return {
      val1: 1,
      val2: 12,
      val3: 5,
      val4: 0,
      val5: 0,
      val6: 0
    }
  },
  methods: {
    focus(e, v) {
      console.log('focus,', e, v)
    },
    blur(e, v) {
      console.log('blur,', e, v)
    },
    add(v) {
      console.log('add'+v)
      // this.val1 = Number(this.val1) + 1;
    },
    reduce(v) {
      console.log('reduce'+v)
      // this.val1 = Math.max(Number(this.val1) - 1, 0);
    },
    change(v){
      console.log('change'+v)
    }
  },
};
</script>

<style lang="less" scoped>
.demo-btn{
  border: 1px solid #ddd;
  background: #eee;
  border-radius: 4px;
  outline: none;
  padding: 3px 10px;
  cursor: pointer;
  transition: all .35s;
  &:hover{
    background: #ddd;
  }
}
</style>

可配置参数

字段	说明	类型	默认值
value	初始值	Number, String	1
min	最小值	Number, String	0
max	最大值	Number, String	Infinity
step	步长	Number, String	1
readonly	是否只读	Boolean	false
transition	是否需要过渡效果	Boolean	true
simple	是否显示简单版	Boolean	true
decimalPlaces	设置保留的小数位	Number	0

• *设置步长为小数时输入框无法输入小数

事件回调

字段	说明	回调参数
add	点击加时触发事件 ｜ value
reduce	点击减时触发事件 ｜ value
change	值改变时触发事件 ｜ value
blur	输入框失去焦点时触发事件	value
focus	输入框获取焦点时触发事件	value