uView Switch 开关选择器

发布时间:2024年01月04日

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

#平台差异说明

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

#自定义样式

同时设置activeColorinactiveColor属性,可以让您自定义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

#异步控制

异步控制场景,一般发生在用户打开或者关闭选择器时,需要本地或者向后端请求判断,是否允许用户打开或者关闭的场景。
同时您也可以组合使用,例如根据接口结果添加disabledloading属性等

注意

请添加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>
文章来源:https://blog.csdn.net/m0_72196169/article/details/135383748
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。