uView Pro
npm

主题

Switch 开关选择器 ​

13:10

选择开关一般用于只有两个选择，且只能选其一的场景。

平台差异说明 ​

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

基本使用 ​

通过v-model绑定一个布尔值变量，这个变量是双向绑定的，当用户开或关选择器的时候，在父组件的该值也会相应的变为true或者false，也就是说， 您不用监听change事件，也能知道选择器当前处于开或者关的状态。

html
<template>
	<u-switch v-model="checked"></u-switch>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义响应式数据
const checked = ref<boolean>(false)

// 定义switch变化回调函数
const change = (status: boolean) => {
	// switch打开或者关闭时触发，值为true或者false
	// 即使不监听此事件，checked此时也会相应的变成true或者false
	// console.log(status);
}
</script>

禁用switch ​

设置disabled为true，即可禁用某个组件，让用户无法点击，禁用分为两种状态：

  • 一是关闭情况下的禁用，这时只显示一个白色的区域。
  • 二是打开后再禁用，这时会在原有的颜色上加一个opacity透明度，但此时依然是不可操作的。
html
<u-switch v-model="checked" :disabled="true"></u-switch>

加载中 ​

通过设置loading变量为true，可以让switch处于加载中的状态，这时switch是不可操作的

html
<u-switch v-model="checked" :loading="true"></u-switch>

<!-- 等价于 -->
<u-switch v-model="checked" loading></u-switch>

自定义颜色 ​

html
<u-switch v-model="checked" active-color="red" inactive-color="#eee"></u-switch>

自定义值 ​

可以通过设置active-value和inactive-value来控制选择器打开或者关闭时，通过change事件发出的回调值。

html
<u-switch v-model="checked" active-value="1" inactive-value="0"></u-switch>

异步控制 ​

这种场景，一般发生在用户打开或者关闭选择器时，需要本地或者向后端请求判断，是否允许用户打开或者关闭的场景。

  • 假设原来是打开状态
  1. 您通过watch监听v-model绑定的checked变量，或者通过监听switch的change事件，得知checked变量发生了变化
  2. 这时您可以通过设置loading为true，同时将checked值设置为true(因为用户已关闭，这里让它重新打开，并处于加载中)
  3. 等请求结束后，根据判断结果，把checked值设置为true或者false，同时去掉加载中状态(loading设置为false)，让组件呈现最终的状态

  • 假设原来处于关闭状态

处理方法同上，只不过对应的状态是反过来的

下面示例为原本是打开状态，用户把它关闭，我们通过异步控制的场景

注意

此处示例中，我们通过watch监听checked变量为false的情景，在定时器模拟回调中又将checked设置为false，会造成无限循环，所以这里 引入了一个中间变量controlStatus来识别

html
<template>
	<u-switch v-model="checked" :loading="loading"></u-switch>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

// 定义响应式数据
const checked = ref<boolean>(true)
const loading = ref<boolean>(false)
// 中间变量，避免在watch中多次回调，造成无限循环
const controlStatus = ref<boolean>(false)

// 定义switch变化回调函数
const change = (status: boolean) => {
	// switch打开或者关闭时触发，值为true或者false
	// console.log(status);
}

// 监听checked变化
watch(checked, (val) => {
	// 等于false，意味着用户手动关闭了switch
	if (val == false) {
		if(controlStatus.value == true) {
			controlStatus.value = false;
			return ;
		}
		// 重新打开switch，并让它处于加载中的状态
		checked.value = true;
		loading.value = true;
		// 模拟向后端发起请求
		getRestultFromServer();
	}
})

// 模拟向后端发起请求
const getRestultFromServer = () => {
	// 通过定时器模拟向后端请求
	setTimeout(() => {
		controlStatus.value = true;
		// 后端允许用户关闭switch，设置checked为false，结束loading状态
		loading.value = false;
		checked.value = false;
	}, 1500);
}
</script>

API ​

Switch Props ​

注意：需要给switch组件通过v-model绑定一个布尔值，来初始化switch的状态，随后该值被双向绑定， 当用打开选择器时，该值在switch组件内部被修改为true，并反映到父组件，否则为false，换言之，您无需监听switch的change事件，也能 知道某一个switch是否被选中的状态

参数说明类型默认值可选值
loading是否处于加载中Booleanfalsetrue
disabled是否禁用Booleanfalsetrue
size开关尺寸，单位rpxString | Number50-
active-color打开时的背景色String#2979ff-
inactive-color关闭时的背景色String#ffffff-
vibrate-short是否使手机发生短促震动，目前只在iOS的微信小程序和微信小程序开发工具有效Booleanfalsetrue
active-value打开选择器时通过change事件发出的值Boolean | Number | Stringtrue
inactive-value关闭选择器时通过change事件发出的值Boolean | Number | Stringfalse

Switch Event ​

|事件名|说明|回调参数| |:-|:-|:-|:-| | change | 在switch打开或关闭时触发 | value：打开时为active-value值，关闭时为inactive-value值 |