Switch 开关

提供更加强大的开关组件，可配合表单组件c-form使用。

平台

App	小程序	H5
√	√	√

属性

属性名	类型	默认值	说明	平台
modelValue	Number,String,Boolean			All
name	String	null	标识	All
disabled	Boolean	null	禁用	All
value	String,Number,Boolean	true	选中时的值	All
inactiveValue	String,Number,Boolean	false	未选中时的值	All
asyncChange	Boolean	false	是否开启异步变更 点击后出现Loading状态 需要监听change事件，操作完成后手动控制isChecked和isLoading的值	All
loadingProps	Object	{}	loading项配置 参考c-loading-indicator组件的props	All
color	String	null	未选中时的背景颜色 支持c-bg-开头的类	All
activeColor	String	null	选中时颜色 支持c-bg-开头的类	All
text	String,Object	null	未选中文字 为object时参考c-text的props	All
activeText	String,Object	null	选中文字 为object时参考c-text的props	All
textSize	String,Number	null	文本尺寸	All
size	String,Number	null	尺寸	All
circleStyle	Object	{}	自定义圆圈样式	All
btnStyle	Object	{}	自定义样式	All
cClass	String,Array,Object	null	组件类	All
cStyle	String,Array,Object	null	组件样式	All
margin	String,Number,Array	null	外边距	All
padding	String,Number,Array	null	内边距	All
bgColor	String	null	背景色，支持c-bg-开头的背景色类	All

事件

事件名	说明	平台
update:modelValue		All
change	{name,value,checked}	All

方法

名称	说明
isChecked	是否选中
isLoading	是否Loading

示例

<template>
    <!-- 普通开关示例 --> 
    <c-switch v-model="isChecked" />

    <!-- 异步开关示例 -->
    <c-switch ref="mySwitch" asyncChange @change="onChange" />
</template>
<script setup>

const mySwitch = ref(null);
function onChange({value}) {
    setTimeout(()=>{
        // 操作成功后，设置开关状态
        mySwitch.value.isChecked = !value;
    },300)

    // 如果遇到错误，关闭Loading状态
    // mySwitch.value.isLoading = false;
}
</script>

开关SCSS变量

// 开关大小
$switch-size:54rpx;
// 开关文本大小
$switch-fontSize:24rpx;