开关 Switch ​

用于一个互斥的交互操作

基础用法 ​

通过绑定 Boolean 值控制选择状态

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

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

const val = ref(false);
</script>

选项禁用 ​

通过 disabled 属性控制不可选状态

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

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

const val = ref(true);
</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
绑定值
Boolean
false
disabled
是否禁用
Boolean
false
checkValue
开启时的值
StringNumberBoolean
true
uncheckValue
关闭时的值
StringNumberBoolean
false
checkText
开启时的文本内容
String
-
uncheckText
关闭时的文本内容
String
-
on-before-ok
触发确定前的回调，返回 false 则中断
Function
()=>true