Switch 开关

基本用法

设置 value 值，监听 change 事件修改值。

<wd-switch value="{{ checked }}" bind:change="handleChange" />

Page({
  data: {
    checked: true
  },
  handleChange (event) {
    this.setData({
      checked: event.detail.value
    })
  }
})

通过 active-value 属性修改开关打开时的值，inactive-value 属性修改开关关闭时的值。

<wd-switch value="{{ checked }}" active-value="沃特" inactive-value="商家后台" />

通过 active-color 属性修改开关打开时的颜色，inactive-color 属性修改开关关闭时的颜色。

<wd-switch value="{{ checked }}" active-color="#13ce66" inactive-color="#f00" />

设置 size 修改开关大小。

<wd-switch value="{{ checked }}" size="20px" />

设置 disabled 属性。

设置 before-change 属性，修改前钩子，接收 { value, resolve } 参数，resolve(true) 表示修改通过，resolve(false) 表示不修改。

<wd-switch value="{{ checked }}" before-change="{{ beforeChange }}" bind:change="handleChange" />

Page({
  data: {
    checked: true
  },
  handleChange (event) {
    this.setData({
      checked: event.detail.value
    })
  }
})

参数	说明	类型	可选值	默认值	最低版本
value	绑定值	boolean / string / number	-	-	-
disabled	禁用	boolean	-	false	-
active-value	打开时的值	boolean / string / number	-	true	-
inactive-value	关闭时的值	boolean / string / number	-	false	-
active-color	打开时的背景色	string	-	#4D80F0	-
inactive-color	关闭时的背景色，默认为白色，所以有灰色边框，如果设置了该值，则会自动去除灰色边框	string	-	#fff	-
size	开关大小，可以为任何单位的字符串尺寸	string	-	28px	-
name	form 表单中的字段名	string	-	-	-
before-change	修改前钩子	function	-	-	2.3.0

事件名称	说明	参数	最低版本
bind:change	值修改事件	event.detail = { value }	-

类名	说明	最低版本
custom-class	根结点样式	-