Switch (开关)

实现开关切换功能。支持显示文字和图标，可自定义颜色和样式，具有加载状态显示，以及可以与表单组件配合使用。使用场景主要包括：在表单、设置页面或需要用户进行二元选择的界面中，提供直观的开关操作选项。

支持平台

安卓	ios	鸿蒙	web	微信小程序
√	√	√	√	√

示例代码

<template>
	<t-page main-class="p-20" title='开关'>
		<t-card main-class="mb-30" title="Switch 开关"
			sub-title="实现开关切换功能。支持显示文字和图标，可自定义颜色和样式，具有加载状态显示，以及可以与表单组件配合使用。使用场景主要包括：在表单、设置页面或需要用户进行二元选择的界面中，提供直观的开关操作选项。"></t-card>
		<t-section main-class="tdr tdb mb-20" title='基础功能-type'></t-section>
		<t-row main-class="tdr tdb mb-30 p-20 fww fjcs">
			<t-switch main-class="mrb-20" :modelValue="switch1" @change="onSwitchChange"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch1" type="primary"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch1" type="success"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch1" type="info"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch1" type="warning"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch1" type="error"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='基础功能-effect'></t-section>
		<t-row main-class="tdr tdb mb-30 p-20 fww fais">
			<t-switch effect="normal" main-class="mrb-20 s-60" v-model="switch2" type="primary"
				size="medium"></t-switch>
			<t-switch effect="dark" main-class="mrb-20" v-model="switch2" type="primary" size="medium"></t-switch>
			<t-switch effect="disabled" main-class="mrb-20" v-model="switch2" type="success" size="medium"></t-switch>
			<t-switch effect="light" main-class="mrb-20" v-model="switch2" type="error" size="medium"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='基础功能-size'></t-section>
		<t-row main-class="tdr tdb mb-30 p-20 fww fais">
			<t-switch main-class="mrb-20 s-60" v-model="switch3" type="primary" size="large"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch3" type="primary" size="large"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch3" type="success" size="medium"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch3" type="error" size="small"></t-switch>
			<t-switch main-class="mrb-20" v-model="switch3" type="warning" size="mini"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='loading'></t-section>
		<t-row main-class="tdr tdb mb-30 p-40 fww">
			<t-switch v-model="switch4" :loading="loading" type="success"></t-switch>
			<t-row main-class='fc w-100% pt-30'>
				<t-button @click="onLoadingClick" type="p">{{loading?'关闭':'打开'}}loading</t-button>
			</t-row>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='显示文字(1内部显示,2外部显示,3中间按钮显示)'></t-section>
		{{switch2}}
		<t-col main-class="tdr tdb mb-30 p-40 fww">
			<t-switch main-class="mb-20 s-50" :mode="1" v-model="switch2" type="p" activeText="开"
				inactiveText="关"></t-switch>
			<t-switch main-class="mb-20 s-50" :mode="2" v-model="switch3" type="success" activeText="开"
				inactiveText="关"></t-switch>
			<t-switch main-class="mb-20 s-50" :mode="3" v-model="switch4" type="success" activeText="按年付费"
				inactiveText="按月付费"></t-switch>
		</t-col>
		<t-section main-class="tdr tdb mb-20" title='状态图标'></t-section>
		<t-row main-class="tdr tdb mb-30 p-40 fww">
			<t-switch v-model="switch5" main-class="s-50" type="p" activeIcon="volume-up"
				inactiveIcon="volume-off"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='禁用'></t-section>
		<t-row main-class="tdr tdb mb-30 p-40 fww">
			<t-switch v-model="switch6" :disabled="true" type="success"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='自定义颜色覆盖主题'></t-section>
		<t-row main-class="tdr tdb mb-30 p-40 fww">
			<t-switch v-model="switch7" activeClass="bg-#dd5fdd" inactiveClass="bg-#f56c6c" type="success"></t-switch>
		</t-row>
		<t-section main-class="tdr tdb mb-20" title='其它样式定制'></t-section>
		<t-row main-class="tdr tdb tdp">
			<t-switch v-model="switch8" type="p" main-class="s-50 w-260 p-30 r-10" :close-scale="false"
				bar-class="r-10"></t-switch>
		</t-row>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {
				switch: true,
				switch1: true,
				switch2: true,
				switch3: true,
				switch4: true,
				switch5: true,
				switch6: true,
				switch7: true,
				switch8: true,
				loading: true,
			};
		},
		methods: {
			onSwitchChange(e : boolean) {
				console.log(e)
			},
			onLoadingClick() {
				this.loading = !this.loading
			}
		},
		onLoad() {

		}
	}
</script>

属性

名称	类型	默认值	说明	可选值
size	String	mini	组件尺寸	large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
type	String	""	组件类型	info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabled	Boolean	false	组件是否禁用	false, true
stop	Boolean	false	是否阻止事件冒泡（Tui统一写法处理事件冒泡）	false, true
hover	Boolean	true	是否有点击效果	false, true
path	String	""	点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。	-
mainClass	String	""	组件根节点的样式	-
nativeClass	String	""	组件根节点原生样式	-
effect	String	"normal"	组件显示主题	normal(正常), dark(深色), light(浅色), plain(镂空)
type	String	p
mode	Number	1	提示文字显示位置	1: 内部显示 2: 外部显示 3: 中间显示
modelValue	Boolean	false	绑定的状态的值
barClass	String	``	Bar按钮样式
activeBarClass	String	``	值为true时 Bar按钮样式
activeIcon	String	``	值为true时显示的图标名称
iconClass	String	``	图标的样式
inactiveIconClass	String	c-#eaeaea	值为false时图标的样式
activeText	String	``	值为true时显示的文本
inactiveText	String	``	值为false时显示的文本
textClass	String	``	文本的样式
activeTextClass	String	``	值为true时文本的样式
loading	Boolean	false	是否显示loading加载动画
inactiveBarClass	String	``	值为fale时 Bar按钮样式
inactiveIcon	String	``	值为false是显示的图标名称
activeIconClass	String	``	值为true是图标的样式
inactiveTextClass	String	c-#acacac	值为false时文本的样式
loadingClass	String	``	加载动画样式
inactiveClass	String	bg-#eaeaea	当值false时组件的样式
closeScale	Boolean	true	是否关闭状态变化时的缩放动画
activeClass	String	``	当值true时组件的样式
showText	Boolean	true	是否显示文字

事件

名称	返回参数	说明
change	(value: boolean)	开关状态改变时触发