选择开关用于在打开和关闭状态之间进行切换。
#平台差异说明
| App（vue） | App（nvue） | H5 | 小程序 |
| √ | √ | √ | √ |
#基础使用
通过v-model绑定一个布尔值变量，这个变量是双向绑定的，当用户开或关选择器的时候，在父组件的该值也会相应的变为true或者false，也就是说， 您不用监听change事件，也能知道选择器当前处于开或者关的状态。
我们为其提供了加载中 禁用 自定义尺寸 自定义颜色 自定义样式 异步控制等六种能力，并在以下案例中为您展示
<u-switch v-model="value" @change="change"></u-switch> <!-- methods --> change(e) { console.log('change', e); },
copy
#加载中
设置loading属性，默认为true，可以让switch处于加载中的状态，这时switch是不可操作的，您可以通过:loading='loading'以动态设置加载状态
<u-switch v-model="value3" loading ></u-switch> <u-switch v-model="value4" loading ></u-switch> <!-- data --> value3: false, value4: true,
copy
#禁用switch
设置disabled属性,默认为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态：
- 一是关闭情况下的禁用，这时只显示一个白色的区域。
- 二是打开后再禁用，这时会在原有的颜色上加一个
opacity透明度，但此时依然是不可操作的。
<u-switch v-model="value" disabled ></u-switch>
copy
#自定义尺寸
设置size属性，可以让您自定义switch的尺寸，单位为px
<u-switch v-model="value3" size="28" ></u-switch> <u-switch v-model="value4" size="20" ></u-switch> <!-- data --> value3: false, value4: true,
copy
#自定义颜色
设置activeColor属性，可以让您自定义switch的颜色，支持多种设置方式，如：activeColor="#f56c6c" activeColor="red" activeColor="rgb(0,0,0)"
<u-switch v-model="value" activeColor="#f56c6c" loading ></u-switch> <u-switch v-model="value1" activeColor="#5ac725" loading ></u-switch> <!-- data --> value: true, value1: true,
copy
#自定义样式
同时设置activeColor和inactiveColor属性，可以让您自定义switch的样式，同样支持多种设置方式
<u-switch space="2" v-model="value11" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"> </u-switch> <u-switch space="2" v-model="value12" activeColor="#f9ae3d" inactiveColor="rgb(230, 230, 230)"> </u-switch> <!-- data --> value11: false, value12: true,
copy
#异步控制
异步控制场景，一般发生在用户打开或者关闭选择器时，需要本地或者向后端请求判断，是否允许用户打开或者关闭的场景。
同时您也可以组合使用，例如根据接口结果添加disabled，loading属性等
注意
请添加asyncChange属性来支持异步控制操作，否则您将先操作v-model绑定的值，并失去控制效果
<template> <u-switch v-model="value13" asyncChange @change="asyncChange" ></u-switch> </template> <script> export default { data() { return { value13:true }; }, methods: { asyncChange(e) { uni.showModal({ content: e ? '确定要打开吗' : '确定要关闭吗', success: (res) => { if (res.confirm) { this.value13 = e } } }) } } }; </script>
