# Switch 开关选择器
选择开关用于在打开和关闭状态之间进行切换。
# 平台差异说明
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 success!
# 加载中
设置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 success!
# 禁用switch
设置disabled
属性,默认为true
,即可禁用某个组件,让用户无法点击,禁用分为两种状态:
- 一是关闭情况下的禁用,这时只显示一个白色的区域。
- 二是打开后再禁用,这时会在原有的颜色上加一个
opacity
透明度,但此时依然是不可操作的。
<u-switch v-model="value" disabled ></u-switch>
✅ Copy success!
# 自定义尺寸
设置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 success!
# 自定义颜色
设置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 success!
# 自定义样式
同时设置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 success!
# 异步控制
异步控制场景,一般发生在用户打开或者关闭选择器时,需要本地或者向后端请求判断,是否允许用户打开或者关闭的场景。
同时您也可以组合使用,例如根据接口结果添加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>
✅ Copy success!
# 此页面源代码地址
# API
# Switch Props
注意:需要给switch
组件通过v-model
绑定一个布尔值,来初始化switch
的状态,随后该值被双向绑定,
当用打开选择器时,该值在switch
组件内部被修改为true
,并反映到父组件,否则为false
,换言之,您无需监听switch
的change
事件,也能
知道某一个switch
是否被选中的状态
参数 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
loading | 是否处于加载中 | Boolean | false | true |
disabled | 是否禁用 | Boolean | false | true |
size | 开关尺寸,单位rpx | String | Number | 25 | - |
activeColor | 打开时的背景色 | String | #2979ff | - |
inactiveColor | 关闭时的背景色 | String | #ffffff | - |
value | 通过v-model双向绑定的值 | Boolean | String | Number | false | - |
activeValue | switch打开时的值 | Boolean | String | Number | true | - |
inactiveValue | switch关闭时的值 | Boolean | String | Number | false | - |
asyncChange | 是否开启异步变更,开启后需要手动控制输入值 | Boolean | false | true |
space | 圆点与外边框的距离 | String | Number | 0 | - |
# Switch Event
事件名 | 说明 | 回调参数 |
---|---|---|
change | 在switch 打开或关闭时触发 | value:打开时为activeValue 值,关闭时为inactiveValue 值 |
input | 在switch 打开或关闭时触发(没开启异步) | value:打开时为activeValue 值,关闭时为inactiveValue 值 |