Switch 开关

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

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page class="p.20" title='开关'>
		<t-card class="mb.30" title="Switch 开关"
			sub-title="实现开关切换功能。支持显示文字和图标，可自定义颜色和样式，具有加载状态显示，以及可以与表单组件配合使用。使用场景主要包括：在表单、设置页面或需要用户进行二元选择的界面中，提供直观的开关操作选项。"></t-card>
		<t-section class="tdr-tdb-mb.20" title='基础功能'></t-section>
		<t-row class="tdr-tdb-mb.30-p.40-ffww-fjcs">
			<t-switch v-model="switch1"></t-switch>
		</t-row>
		<t-section class="tdr-tdb-mb.20" title='loading'></t-section>
		<t-row class="tdr-tdb-mb.30-p.40-ffww">
			<t-switch v-model="switch1" :loading="loading" type="success"></t-switch>
			<t-row class='fc-w.100%-pt.30'>
				<t-button @click="onLoadingClick" type="p">{{loading?'关闭':'打开'}}loading</t-button>
			</t-row>
		</t-row>
		<t-section class="tdr-tdb-mb.20" title='显示文字(1内部显示,2外部显示,3中间按钮显示)'></t-section>
		<t-col class="tdr-tdb-mb.30-p.40-ffww">
			<t-switch class="mb.20" mode="1" v-model="switch2" type="p"></t-switch>
			<t-switch class="mb.20" mode="2" v-model="switch3" type="success" activeText="按年付费"
				inactiveText="按月付费"></t-switch>
			<t-switch class="mb.20" mode="3" v-model="switch4" type="success"></t-switch>
		</t-col>
		<t-section class="tdr-tdb-mb.20" title='状态图标'></t-section>
		<t-row class="tdr-tdb-mb.30-p.40-ffww">
			<t-switch v-model="switch5" type="p" activeIcon="volume-up" inactiveIcon="volume-off"></t-switch>
		</t-row>
		<t-section class="tdr-tdb-mb.20" title='禁用'></t-section>
		<t-row class="tdr-tdb-mb.30-p.40-ffww">
			<t-switch v-model="switch6" :disabled="true" type="success"></t-switch>
		</t-row>
		<t-section class="tdr-tdb-mb.20" title='自定义颜色覆盖主题'></t-section>
		<t-row class="tdr-tdb-mb.30-p.40-ffww">
			<t-switch v-model="switch7" activeColor="#dd5fdd" inactiveColor="#f56c6c" activeTextColor="#fff"
				inactiveTextColor="#fff" type="success"></t-switch>
		</t-row>
		<t-section class="tdr-tdb-mb.20" title='尺寸'></t-section>
		<t-row class="tdr-tdb-mb.30-p.60-ffww">
			<t-switch v-model="switch8" type="warning" class='ats.2' activeIcon="volume-up"
				inactiveIcon="volume-off"></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: {
			onLoadingClick() {
				this.loading = !this.loading
			}
		},
		onLoad() {

		}
	}
</script>

Props

名称	描述	类型	默认值	可选值
type	组件类型，默认为 'p'	String	'p'	'p', 'v'
showText	是否显示文字，默认为 true	Boolean	true	true, false
mode	提示文字显示位置，默认为 '1'	String	'1'	'1', '2', '3'
modelValue	绑定的模型值，默认为 false	Boolean	false	true, false
contentClass	内容区域的额外类名，默认为 ''	String	''	-
barClass	Bar区域的额外类名，默认为 ''	String	''	-
activeColor	打开时的背景色，默认为 ''	String	''	-
inactiveColor	关闭时的背景色，默认为 '#eaeaea'	String	'#eaeaea'	-
activeText	打开时的文字，默认为 '开'	String	'开'	-
inactiveText	关闭时的文字，默认为 '关'	String	'关'	-
activeIcon	打开时的Bar图标，默认为 ''	String	''	-
inactiveIcon	关闭时的Bar图标，默认为 ''	String	''	-
activeTextColor	打开时的文字颜色，默认为 ''	String	''	-
inactiveTextColor	关闭时的文字颜色，默认为 '#acacac'	String	'#acacac'	-
loading	是否处于加载中状态，默认为 false	Boolean	false	true, false

Events

事件名	描述	回调参数	版本
update:modelValue	模型值更新时触发	(value: boolean)	-
change	开关状态改变时触发	(value: boolean)	-

Slots

名称	描述
default	开关内容区域