Switch

A switch component used to toggle between two states.

Basic Usage

Bind a boolean variable using v-model.

在 github 中打开

展开代码

复制代码

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

const checked = ref(false)
</script>

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

Disabled State

Specify whether the Switch component is disabled using the disabled attribute.

在 github 中打开

展开代码

复制代码

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

Size

Provides three sizes for the switch: large, default, and 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 Hook

Use the before-switch attribute to execute specific logic before switching. This function needs to return a 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>

Attributes

Attribute Name	Description	Type	Default Value
v-model	Bound value	boolean	false
disabled	Whether disabled	boolean	false
size	Switch size	'large' | 'default' | 'small'	'default'
checked	Whether checked	boolean	false
before-switch	Hook function before switching	() => Promise<boolean>	() => Promise.resolve(true)

Events

Event Name	Description	Callback Parameters
change	Triggered when the state changes	(value: boolean)
click	Triggered when clicked	(value: boolean)