基础使用

打开通知

<script setup>
import { ref } from 'vue'
const checked = ref(false)
</script>

<template>
  <c-toggle v-model="checked" label="打开通知" />
</template>

点击展开/收起代码

点击打开交互式编辑器

尺寸

超小

小型

中等（默认）

大型

超大

状态： { "xs": false, "sm": false, "md": false, "lg": false, "xl": false }

<script setup>
import { reactive } from 'vue'

const checkStatus = reactive({
  xs: false,
  sm: false,
  md: false,
  lg: false,
  xl: false,
})
</script>

<template>
  <div class="c-row c-gutter-x-md c-items-center">
    <div>
      <c-toggle v-model="checkStatus.xs" size="xs" label="超小" />
    </div>
    <div>
      <c-toggle v-model="checkStatus.sm" size="sm" label="小型" />
    </div>
    <div>
      <c-toggle v-model="checkStatus.md" size="md" label="中等（默认）" />
    </div>
    <div>
      <c-toggle v-model="checkStatus.lg" size="lg" label="大型" />
    </div>
    <div>
      <c-toggle v-model="checkStatus.xl" size="xl" label="超大" />
    </div>
  </div>
  状态： <code>{{ checkStatus }}</code>
</template>

点击展开/收起代码

点击打开交互式编辑器

状态

禁用态

禁用态

<script setup>
import { ref } from 'vue'
const checked1 = ref(false)
const checked2 = ref(true)
</script>

<template>
  <c-toggle v-model="checked1" label="禁用态" disabled />
  <c-toggle
    v-model="checked2"
    label="禁用态"
    disabled
    class="c-ml-md"
  />
</template>

点击展开/收起代码

点击打开交互式编辑器

CToggle API

Props

Events

label

string

默认值  ''

文案

size

CSize

默认值  'md'

尺寸

modelValue

any

*

undefined

checkValue

any

默认值  true

选中时的值

uncheckValue

any

默认值  false

未选中时的值

disabled

boolean

默认值  false

是否禁用