Switch 开关

参考 TDesign switch 示例，支持文字/图标内容、加载态、自定义颜色和不同尺寸动画。

演示

9:41

代码示例

<re-switch class="demo-base" :value="baseValue" @update:value="baseValue = $event" />
  <re-switch class="demo-label" :value="labelValue" :label="labelPair" @update:value="labelValue = $event" />
  <re-switch class="demo-icon" :defaultValue="true" :icon="iconPair" />
  <re-switch class="demo-color" :value="colorValue" @update:value="colorValue = $event" />
  <re-switch class="demo-loading-off" :defaultValue="false" :loading="true" />
  <re-switch class="demo-loading-on" :value="true" :loading="true" />
  <re-switch class="demo-disabled-off" :disabled="true" />
  <re-switch class="demo-disabled-on" :value="true" :disabled="true" />
  <re-switch class="demo-large" :defaultValue="true" size="large" />
  <re-switch class="demo-medium" :defaultValue="true" />
  <re-switch class="demo-small" :defaultValue="true" size="small" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-switch />。

API

Switch Props

名称	类型	默认值	描述	必传
value	`SwitchValue`	-	当前值	N
defaultValue	`SwitchValue`	-	-	N
disabled	`boolean`	false	是否禁用	N
loading	`boolean`	false	是否显示加载状态	N
size	`string`	'medium'	尺寸	N
label	`string \| Array<string>`	'' as string \| Array<string>	-	N
icon	`Array<string>`	() : Array<string> => as Array<string>	图标，支持字体图标名称或图片地址	N
customValue	`Array<SwitchValue>`	() : Array<SwitchValue> => true, false as Array<SwitchValue>	-	N
customStyle	`string`	''	自定义样式	N

Switch Events

名称	参数	描述
change	value: SwitchValue	值变化时触发
update:value	value: SwitchValue	-
update:modelValue	value: SwitchValue	值更新时触发

Switch Slots

名称	描述
-	-

Stepper 步进器

通过 +/- 按钮调整数值，支持范围、步长和整数限制

Textarea 多行文本框

多行文本输入，支持自适应高度、字数统计和最大长度限制

内容锚点

演示
代码示例
引入
API