Switch 开关

用于在两种状态间切换的开关组件。

基础用法

通过v-model绑定一个boolean类型的变量。

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

<template>
  <ol-switch v-model="checked" />
</template>

禁用状态

通过disabled属性指定是否禁用 Switch 组件。

在 github 中打开

展开代码

复制代码

<template>
  <ol-switch disabled />
</template>

尺寸

提供三种尺寸的开关：large、default和small。

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>
import { ref } from 'vue'

const checked = ref(false)
</script>

<template>
  <div class="flex flex-col gap-2">
    <ol-switch v-model="checked" size="large" />
    <ol-switch v-model="checked" size="default" />
    <ol-switch v-model="checked" size="small" />
  </div>
</template>

切换前的钩子函数

通过before-switch属性可以在切换前执行特定的逻辑。该函数需要返回一个Promise。

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>
function handleBeforeSwitch(): Promise<boolean> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 1000)
  })
}
</script>

<template>
  <ol-switch :before-switch="handleBeforeSwitch" />
</template>

属性

属性名	说明	类型	默认值
v-model	绑定值	boolean	false
disabled	是否禁用	boolean	false
size	开关大小	'large' | 'default' | 'small'	'default'
checked	是否选中	boolean	false
before-switch	切换前的钩子函数	() => Promise<boolean>	() => Promise.resolve(true)

事件

事件名	说明	回调参数
change	状态改变时触发	(value: boolean)
click	点击时触发	(value: boolean)