【经验分享】如何手撸一个switch组件。

<import-sjs name="parse" from="./parse.sjs" />
<view class="qts-class qts-switch {{parse.setSize(size)}} {{parse.setCurrent(value)}}" onTap="toggle">
  <input type="text" name="name" value="{{value}}" class="qts-switch-hide-input"></input>
  <view class="qts-switch-inner" a:if="{{value}}">
    <slot name="open"></slot>
  </view>
  <view class="qts-switch-inner" a:else>
    <slot name="close"></slot>
  </view>
</view>

var sizes = ["large", "small", "default"];
var prefixCls = "qts-switch";
var setSize = function (size) {
  var index = sizes.indexOf(size);
  return prefixCls + (index > -1 ? ('-' + size) : 'default')
}
var setCurrent = function (value) {
  var className = value ? prefixCls + "-checked" : "";
  return className;
};
export default {
  setSize,
  setCurrent
};

Component({
  props: {
    value: false,
    size: 'default' // large、small、default
  },
  didMount() {
    this.setData({
      value: this.props.value
    })
  },
  didUpdate() {
    this.setData({
      value: this.props.value
    })
  },
  data: {
    value: false
  },
  methods: {
    toggle() {
      const value = this.data.value ? false : true;
      this.props.onChange({ value });
    }
  }
})