Switch 按钮

使用指南

Component({
  data: {
    value1: false,
    value2: true,
    value3: true,
    value4: true,
    value5: true,
  },

  onChange(event) {
    const { key } = event.currentTarget.dataset;
    this.setData({
      [key]: event.detail,
    });
  },
});

<view>
  <tms-switch data-key="value1" checked="{{ value1 }}" bind:change="onChange" />
</view>

<view>
  <tms-switch
    disabled
    data-key="value2"
    checked="{{ value2 }}"
    bind:change="onChange"
  />
</view>

<view>
  <tms-switch
    type="info"
    data-key="value3"
    checked="{{ value3 }}"
    bind:change="onChange"
  />
</view>

<view>
  <tms-switch
    type="danger"
    data-key="value4"
    checked="{{ value4 }}"
    bind:change="onChange"
  />
</view>

<view>
  <tms-switch
    type="success"
    data-key="value5"
    checked="{{ value5 }}"
    bind:change="onChange"
  />
</view>

API

属性	说明	类型	可选值	默认值	版本
checked	开关选中状态	Boolean	—	false	-
name	在表单内提交时的标识符	String	—	—	-
type	开关主题选择	String	primary | success | info | warning | danger | primary	custom
disabled	是否禁用	Boolean	—	false	-

支持原生 button 的其他所有属性。

EVENTS

属性	说明	类型	版本
bind:change	开关状态切换回调	(isChecked: boolean) => {}	-

外部样式

类名	说明
custom-class	根节点样式类
node-class	圆点样式类

CSS变量

// 开关宽度
--switch-width: 88rpx;
// 开关高度
--switch-height: 28rpx;
// 开关背景颜色
--switch-background: #e1e6ec;
// 开关圆点边框颜色
--switch-node-border-color: #ccc;
// 开关圆点边框宽度
--switch-node-border-width: 2rpx;
// 禁止开关透明度
--switch-opacity-disabled: .3;
// 开关动画时长 
--switch-transform-duration: .3s;
// 开关节点颜色 
--switch-node-background: #fff;
// 重要开关颜色 
--switch-primary-background: #5a97f9;
// 成功开关颜色 
--switch-success-background: #67c23a;
// 信息开关颜色 
--switch-info-background: #909399;
// 警告开关颜色 
--switch-warning-background: #e6a23c;
// 危险开关颜色 
--switch-danger-background: #f56c6c;