Switch 开关

介绍

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

引入

"usingComponents": {
  "m-switch": "mind-ui-weapp/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 'mind-ui-weapp/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: 新状态的值