Tui Plus Vapor

Appearance

# t-switch

Switch 开关

t-switch 组件介绍 ​

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

t-switch 平台兼容 ​

HarmonyH5AndroidiOS小程序UTS
✅✅✅✅✅✅

t-switch 基础用法 ​

基础用法参考 demo/switch/switch.uvue，通过 v-model 绑定开关状态。

vue
<template>
	<view class="p-10">
		<tui-theme-switch></tui-theme-switch>
		<t-card class="mb-15"
				title="Switch 开关"
				sub-title="实现开关切换功能。支持显示文字和图标，可自定义颜色和样式，具有加载状态显示，以及可以与表单组件配合使用。使用场景主要包括：在表单、设置页面或需要用户进行二元选择的界面中，提供直观的开关操作选项。"></t-card>
<t-section class="r-10 mb-10 p-10"
				   title='其它样式定制'></t-section>
		<view :class="[`r-10 tvg p-10`]">
			<t-switch v-model="switch8"
					  class="mrb-15"
					  size="large"
					  type="primary"
					  :close-scale="false"
					  content-class="r-5!"
					  bar-class="r-5! ats-0.5"></t-switch>
			<t-switch v-model="switch8"
					  size="large"
					  type="primary"
					  :close-scale="false"
					  bar-class="ats-0.5"></t-switch>
		</view>
		<t-section class="r-10 mb-10"
				   title='基础功能-type'></t-section>
		<view :class="[`fl r-10 tvg mb-15 p-10 fww fjcs`]">
			<t-switch class="mrb-10"
					  :modelValue="switch1"
					  @change="onSwitchChange"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch1"
					  type="primary"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch1"
					  type="success"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch1"
					  type="info"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch1"
					  type="warning"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch1"
					  type="error"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='基础功能-effect'></t-section>
		<view :class="[`fl r-10 tvg mb-15 p-10 fww fjcs`]">
			<t-switch effect="light"
					  class="mrb-10"
					  v-model="switch2"
					  type="primary"
					  size="medium"></t-switch>
			<t-switch effect="light"
					  class="mrb-10"
					  v-model="switch2"
					  type="primary"
					  size="medium"></t-switch>
			<t-switch effect="light"
					  class="mrb-10"
					  v-model="switch2"
					  type="success"
					  size="medium"></t-switch>
			<t-switch effect="light"
					  class="mrb-10"
					  v-model="switch2"
					  type="error"
					  size="medium"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='基础功能-size'></t-section>
		<view :class="[`fl r-10 tvg mb-15 p-10 fww fjcs`]">
			<t-switch class="mrb-10"
					  v-model="switch3"
					  type="primary"
					  size="large"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch3"
					  type="primary"
					  size="large"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch3"
					  type="success"
					  size="medium"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch3"
					  type="error"
					  size="small"></t-switch>
			<t-switch class="mrb-10"
					  v-model="switch3"
					  type="warning"
					  size="mini"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='loading'></t-section>
		<!-- 修复点1：这里原来多了一个反引号 `fww]`，导致模板解析报错 -->
		<view :class="[`r-10 fl tvg mb-15 p-20 fww`]">
			<t-switch v-model="switch4"
					  :loading="loading"
					  type="success"></t-switch>
			<view class='fc w-100% pt-15'>
				<t-button @click="onLoadingClick"
						  type="primary">{{loading?'关闭':'打开'}}loading</t-button>
			</view>
		</view>

		<t-section class="r-10 mb-10"
				   title='显示文字(1内部显示,2外部显示,3中间按钮显示)'></t-section>
		<view :class="[`r-10 tvg mb-15 p-20 fww`]">
			<t-switch class="mb-10"
					  :mode="1"
					  v-model="switch2"
					  type="primary"
					  activeText="开"
					  inactiveText="关"></t-switch>
			<t-switch class="mb-10"
					  :mode="2"
					  v-model="switch3"
					  type="success"
					  activeText="开"
					  inactiveText="关"></t-switch>
			<t-switch class="mb-10"
					  :mode="3"
					  v-model="switch4"
					  type="success"
					  activeText="按年付费"
					  inactiveText="按月付费"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='状态图标'></t-section>
		<view :class="[`r-10 fl tvg mb-15 p-20 fww`]">
			<t-switch v-model="switch5"
					  type="primary"
					  activeIcon="volume-up"
					  inactiveIcon="volume-off"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='禁用'></t-section>
		<view :class="[`fl r-10 mb-15 p-20 fww`]">
			<t-switch v-model="switch6"
					  :disabled="true"
					  type="success"></t-switch>
		</view>

		<t-section class="r-10 mb-10"
				   title='自定义颜色覆盖主题'></t-section>
		<view :class="[`r-10 tvg mb-15 p-20 fww`]">
			<t-switch v-model="switch7"
					  active-class="bg-#dd5fdd!"
					  inactive-class="bg-#f56c6c"
					  type="success"></t-switch>
		</view>
	</view>
</template>
<script setup lang="uts">
	import { ref } from 'vue'

	const switch1 = ref(true)
	const switch2 = ref(true)
	const switch3 = ref(true)
	const switch4 = ref(true)
	const switch5 = ref(true)
	const switch6 = ref(true)
	const switch7 = ref(true)
	const switch8 = ref(true)
	const loading = ref(true)

	const onSwitchChange = (e: any) => {
		console.log(e)
	}
	const onLoadingClick = () => {
		loading.value = !loading.value
	}
</script>

t-switch Props ​

属性名说明类型默认值
path点击组件后跳转的页面路径；为空时仅响应事件string''
hover是否启用点击效果booleantrue
type组件主题类型，可选 info、primary、error、warning、successstring''
disabled是否禁用booleanfalse
effect组件显示主题，可选 normal、dark、light、plainstring'normal'
size组件尺寸，可选 large、medium、small、ministring'medium'
modelValue双向绑定的值booleanfalse
activeClass值为 true 时组件的样式string''
inactiveClass值为 false 时组件的样式string'bg-#eaeaea'
showText是否显示文字booleantrue
mode提示文字显示位置，可选 1（内部）、2（外部）、3（两侧）number1
barClassBar 按钮样式string''
activeBarClass值为 true 时 Bar 按钮样式string''
inactiveBarClass值为 false 时 Bar 按钮样式string''
activeIcon值为 true 时显示的图标名称string''
inactiveIcon值为 false 时显示的图标名称string''
iconClass图标的样式string''
activeIconClass值为 true 时图标的样式string''
inactiveIconClass值为 false 时图标的样式string'c-#eaeaea'
activeText值为 true 时显示的文本string''
inactiveText值为 false 时显示的文本string''
activeValue值为 true 时的实际值string''
inactiveValue值为 false 时的实际值string''
textClass文本的样式string''
activeTextClass值为 true 时文本的样式string''
inactiveTextClass值为 false 时文本的样式string'c-#acacac'
contentClass中间内容区样式string''
loading是否显示 loading 加载动画booleanfalse
loadingClass加载动画样式string''
closeScale是否关闭状态变化时的缩放动画booleantrue

t-switch Events ​

事件名说明回调参数
change开关状态改变时触发value: boolean
click点击时触发-
transitionend动画结束时触发-
update:modelValue双向绑定值更新时触发value: boolean