switch 开关

引入

全局引入，在 miniprogram 根目录下的app.json中配置，局部引入，在需要引入的页面或组件的index.json中配置。

// app.json 或 index.json
"usingComponents": {
  "wr-switch": "@retailwe/ui-switch/index"
}

代码演示

<wr-switch
  value="{{value}}"
  min="{{min}}"
  max="{{max}}"
  bind:minus="handleMinus"
  bind:plus="handlePlus"
  bind:overlimit="handleOverlimit"
  bind:blur="handleBlur"
></wr-switch>

Page({
  data: {
    disabled: false,
    min: 3,
    max: 10,
    value: 4,
  },
  handleMinus: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handlePlus: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
  handleOverlimit: function() {
    console.log('当前数量不符合规范');
  },
  handleBlur: function(e) {
    this.setData({
      value: e.detail.value,
    });
  },
});

switch Props

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------ | ----------------- | -------- | ------ | ---- | | iClass | 自定义 class 类名 | string | - | - | | disabled | 是否禁用 | boolean | false | - | - | | color | 自定义颜色 |string | - | - | | size | 大小，有效值：s, m, l | string | l | - | | checked | 是否选中 | boolean | false | - | - |

switch Event

| 事件名 | 说明 | 参数 | | ------ | ---------- | ---- | | change | 组件改变时触发 | - |