开关 Switch

在两个互斥的状态之间进行切换。通常用于启用或禁用某个功能，或在开和关之间切换某个设置。

Switch

配置项

Disabled

Size

基础用法

开关的基础用法。

<template>
  <bp-space>
    <bp-switch v-model="val"></bp-switch>
    <bp-switch v-model="val" disabled></bp-switch>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(true);
</script>

开关尺寸

提供两种开关尺寸，分别是 small - 小型（默认），mini - 迷你

<template>
  <bp-space>
    <bp-switch v-for="size in sizes" :size v-model="val"></bp-switch>
  </bp-space>
</template>

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

const sizes = ["small", "mini"];
const val = ref(true);
</script>

自定义文案

通过 check-text 和 uncheck-text 设置对应状态下的文案。

关闭

<template>
  <bp-switch v-model="val" check-text="开启" uncheck-text="关闭"></bp-switch>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(false);
</script>

异步操作

通过 on-before-ok 属性拦截开关状态，返回值用于判断是否允许切换。

<template>
  <bp-switch v-model="val" :on-before-ok="onBeforeOk"></bp-switch>
</template>

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

const val = ref(false);

const onBeforeOk = async () => {
  await new Promise((resolve) => setTimeout(resolve, 2000));
  return true;
};
</script>

Switch 属性

v-model	绑定值	SwitchValue	-	-
disabled	是否禁用	Boolean	-	-
check-value	开启时的值	SwitchValue	true	-
uncheck-value	开启时的值	SwitchValue	false	-
check-text	开启时的文案	String	-	-
uncheck-text	开启时的文案	String	-	-
on-before-ok	触发ok前的回调，返回布尔值控制开关状态	()=>void | boolean | Promise<void | boolean>	-	-