Mind UI

# Switch 开关

# 介绍

用于在打开和关闭状态之间进行切换。

# 引入

"usingComponents": {
  "m-switch": "/dist/switch/index"
}

# 示例

# 基础用法

<m-switch value="{{ checked }}" bind:change="onChange" />

Page({
  data: {
    checked: true
  },

  onChange({ detail }) {
    // 回调中更新 checked 状态
    this.setData({ 
    	checked: detail 
    })
  }
})

# 禁用

<m-switch value="{{ checked }}" disabled />

# 更新中

<m-switch value="{{ checked }}" loading />

# 自定义颜色

<m-switch value="{{ checked }}" active-color="#07c160" inactive-color="#ee0a24" />

# 异步切换开关

<m-switch value="{{ checked }}" loading="{{ loading }}" bind:change="onAsyncChange" />

import Modal from '/dist/modal/modal'

Page({
  data: {
    checked: false,
    loading: false
  },

  // 异步
  onAsyncChange({ detail }) {
    Modal({
      title: '提示',
      content: '异步切换开关',
      asyncClose: true
    })
    .then(() => {
      Modal.close()

      this.setData({
        loading: true
      })

      setTimeout(() => {
        this.setData({
          loading: false,
          checked: detail
        })
      }, 2000)

    }).catch(() => {
      Modal.close()
    })
  }
})

# Api

# Properties

参数 说明 类型 可选值 默认值
custom-class switch 根节点样式 String — —
name 表单提交时使用 String — —
value 开关选中状态 Boolean — false
loading 是否为更新中 Boolean — false
disabled 是否禁用 Boolean — false
active-color switch 打开时的背景色 String — #1989fa
inactive-color switch 关闭时的背景色 String — #ffffff
active-value switch 打开时的值 Boolean String Number — true
inactive-value switch 关闭时的值 Boolean String Number — false

# Event

事件名称 说明 返回值
bind:change switch 状态发生变化时的回调函数 event.detail: 新状态的值

← Radio 单选框 →