t-switch

Switch 开关

组件介绍

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

平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

基础用法

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

<!-- 基础开关 -->
<t-switch v-model="checked"></t-switch>

<!-- 带文字的开关 -->
<t-switch v-model="checked" activeText="开启" inactiveText="关闭"></t-switch>

<!-- 不同模式 -->
<t-switch v-model="checked" :mode="1" activeText="开" inactiveText="关"></t-switch>
<t-switch v-model="checked" :mode="2" activeText="ON" inactiveText="OFF"></t-switch>
<t-switch v-model="checked" :mode="3" activeText="已启用" inactiveText="已禁用"></t-switch>

Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	true
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
modelValue	双向绑定的值	boolean	false
activeClass	值为 true 时组件的样式	string	''
inactiveClass	值为 false 时组件的样式	string	'bg-#eaeaea'
showText	是否显示文字	boolean	true
mode	提示文字显示位置，可选 1（内部）、2（外部）、3（两侧）	number	1
barClass	Bar 按钮样式	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 加载动画	boolean	false
loadingClass	加载动画样式	string	''
closeScale	是否关闭状态变化时的缩放动画	boolean	true

Events

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