Yt-UI
首页
快速开始
组件文档
首页
快速开始
组件文档
  • 表单组件

    • 输入框 Input
    • 多行输入框 Textarea
    • 开关 Switch
    • 多选框组 CheckboxGroup
    • 单选框组 RadioGroup
    • 滑块 Slider
    • 选择器 Picker
    • 日历 Calendar
    • 表单 Form
  • 展示组件

    • 头像 Avatar
    • 徽标 Badge
    • 卡片 Card
    • 标签 Tag
    • 步骤条 Steps
    • 结果页 Result
    • 空状态 Empty
    • 虚拟列表 VirtualList
  • 交互组件

    • 按钮 Button
    • 悬浮按钮 FAB
    • 图标 Icon
    • 搜索 Search
    • 分段器 Segment
    • 轮播 Swiper
    • 指示点 Dots
  • 反馈组件

    • 加载 Loading
    • 弹窗 Popup
    • 遮罩层 Overlay
    • 通告栏 NoticeBar
  • 导航组件

    • 标签栏 Tabbar
    • 顶部标签栏 TopTabbar
    • 折叠面板 Collapse
    • 课程表 Schedule
  • 布局组件

    • 分割线 Divider
    • 链接 Line
    • 可移动视图 MovableView

yt-switch 开关组件

属性

属性名类型默认值说明
namestring''表单字段名
modelValueboolean | nullnull绑定值 (v-model)
checkedbooleanfalse是否选中
disabledbooleanfalse是否禁用
type'switch' | 'checkbox''switch'开关类型

事件

事件名参数说明
update:modelValuemodelValue: booleanv-model 更新
changevalue: boolean开关变化

表单集成

支持表单字段注册。

示例

基本开关

<yt-switch />

绑定值

<yt-switch v-model="isActive" />

<yt-switch :modelValue="checked" @update:modelValue="checked = $event" />

默认选中

<yt-switch :checked="true" />

<yt-switch v-model="defaultOn" :checked="true" />

禁用状态

<yt-switch :disabled="true" />

<yt-switch :disabled="isLoading" />

复选框类型

<yt-switch type="checkbox" />

<yt-switch type="checkbox" v-model="agree" />

表单字段

<yt-switch name="notification" />

事件处理

<yt-switch v-model="switchValue" @change="handleSwitchChange" />

完整示例

<yt-switch
  name="autoSave"
  v-model="autoSave"
  :disabled="saving"
  type="switch"
  @change="savePreference"
/>
最近更新:: 2026/1/2 20:18
Contributors: CHEEMS
Prev
多行输入框 Textarea
Next
多选框组 CheckboxGroup