Stepper

步进器。Stepper UI 提供与WeLink规范一致的视图。

效果示例

<div class="page">
  <div class="page__hd">
    <h1 class="page__title">Stepper</h1>
    <p class="page__desc">步进器</p>
  </div>
  <div class="page__bd">
    <div class="weui-cells">
      <div class="weui-cell weui-cell-list weui-cell-stepper">
        <div class="weui-cell__bd">
          主文本
        </div>
        <div class="weui-cell__ft">
          <span class="weui-cell_sub_stepper_minus" onclick="minus()">
            <svg viewBox="0 0 30 2" fill="currentColor"><path d="M0 0h30v2H0z"></path></svg>
          </span>
          <span class="weui-cell_sub_stepper_input">
            <input id="stepperInput" name="stepperVal" type="text" maxlength="6" value="0" />
          </span>
          <span class="weui-cell_sub_stepper_plus" onclick="plus()">
            <svg viewBox="0 0 30 30" fill="currentColor"><path d="M14 14H0v2h14v14h2V16h14v-2H16V0h-2v14z"></path></svg>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  var inputEl = document.getElementById("stepperInput");
  var minusEl = document.getElementsByClassName("weui-cell_sub_stepper_minus")[0];
  var plusEl = document.getElementsByClassName("weui-cell_sub_stepper_plus")[0];
  var max = 1000;
  var min = -5;
  var step = 1;
  var defaultVal = 12;
  inputEl.value = defaultVal;
  function getStepperVal() {
    var args = optCall();
    console.log(args);
  }
  function plus() {
    var fn = vel => {
      var valRef = vel + step;
      if (valRef <= max) {
        minusEl.classList.remove("disable");
        return valRef;
      }
      plusEl.classList.add("disable");
      return vel;
    };
    optCall(fn);
  }
  function minus() {
    var fn = vel => {
      var valRef = vel - step;
      if (valRef >= min) {
        plusEl.classList.remove("disable");
        return valRef;
      }
      minusEl.classList.add("disable");
      return vel;
    };
    optCall(fn);
  }
  function optCall(fn) {
    var ref1 = inputEl.value.replace(/[^\d|-]/gi, "");
    var valRef = parseInt(ref1);
    if (fn) {
      inputEl.value = fn(valRef);
    }
    return { el: inputEl, vel: inputEl.value };
  }
</script>