作为跑步爱好者，经常需要评估一下自己能在多长时间内跑完一场马拉松比赛，也希望在操场训练的时候知道在目标配速下每圈的用时，从而更好的掌控自己的训练，所以就做了个马拉松配速计算器的小程序，可以根据完赛目标计算马拉松比赛配速和运动场训练时的圈速，要的打开就算，算完就练。

第一个版本，用时间选择控件输入，跑友说选择方式滚来滚去的不方便，不如输入来的直接，我自己验证确实是输入更快捷。

第二个版本，把时间选择控件改成input，但是在实现点击输入区域全选input里的数字遇到问题了：tdesign里的selection-start和selection-end不能通过focus很好的触发，但是input之外的事件可以实现，所以有了这个组件开发的想法：

实现方案：

数字输入控件由一个input和一个text组成，默认隐藏input显示text；

当用户触发text的tap事件，设置focus属性为true，设置seleciton-start和selection-end的值，同时显示input隐藏text；

用户完成输入触发input的onchange事件，设置focus属性值为false，隐藏input显示text，抛出change事件。

wxml代码：

<view class="auto-selection-input">
  <input wx:if="{{focus}}" t-class="input" focus="{{focus}}" selection-start="{{ss}}" selection-end="{{se}}" bindinput="max" bindchange="onchange" type="number" maxlength="2" value="{{value}}" />
  <text wx:else class="text" bind:tap="onfocus">{{value}}</text>
</view>

ts代码：

// components/auto-selection-input.ts
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    focus: {
      type: Boolean,
      value: false
    },
    max: {
      type: Number,
      value: -1
    },
    value: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    value: 0,
    "ss": -1,
    "se": -1
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onfocus(e: any) {
      const value = this.data.value;
      const length = value >= 10 ? 2 : 1;
      this.setData({
        "ss": 0,
        "se": length
      });

      const focus = true;
      this.setData({
        focus
      });
    },
    onchange(e: any) {
      const value = e.detail.value;
      this.setData({
        focus: false,
        ss: -1,
        se: -1,
        value
      });

      // 提交change事件
      this.triggerEvent('change', { value });
    },

    max(e: any) {
      const value = parseInt(e.detail.value || '0');
      const max = this.properties.max;
      if (value > max) {
        return {
          value: max,
          cursor: 2
        }
      }

      return {
        value: value,
        cursor: 2
      }
    }
  }
})

css：

.auto-selection-input {
  text-align: center;
  .input {
    width: 60rpx;
    padding-top: 8rpx;
  }
  .text {
    display: block;
    width: 60rpx;
  }
}

github地址：https://github.com/zhangwei03020915/miniprogram-components