开关 Switch

互斥性的操作控件，用户可打开或关闭某个功能。

基本用法

开关的基本用法。

<template>
  <sb-switch v-model:checked="checked" />
</template>

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

开关类型

开关分为 circle - 圆形（默认）、round - 圆角、line - 线性三种类型。

<template>
  <sb-switch v-model:checked="checked" />
  <sb-switch v-model:checked="checked" type="round" />
  <sb-switch v-model:checked="checked" type="line" />
</template>

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

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

开关尺寸

开关分为 small、medium 两种尺寸。

<template>
  <sb-switch v-model:checked="checked" />
  <sb-switch v-model:checked="checked" size="small" />
  <sb-switch v-model:checked="checked" type="round" />
  <sb-switch v-model:checked="checked" type="round" size="small" />
  <sb-switch v-model:checked="checked" type="line" />
  <sb-switch v-model:checked="checked" type="line" size="small" />
</template>

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

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

禁用状态

禁用开关。

<template>
  <sb-switch disabled v-model:checked="checked"  @change="diasbled"></sb-switch>
  <sb-switch disabled v-model:checked="checked1" size="small"  @change="diasbled"></sb-switch>
  <sb-switch disabled v-model:checked="checked" type="round"  @change="diasbled"></sb-switch>
  <sb-switch disabled v-model:checked="checked1" type="round" size="small"  @change="diasbled"></sb-switch>
  <sb-switch disabled v-model:checked="checked" type="line"  @change="diasbled"></sb-switch>
  <sb-switch disabled v-model:checked="checked1" type="line" size="small"  @change="diasbled"></sb-switch>
</template>

<script setup>
import { ref } from 'vue';
const diasbled = console.log;
const checked = ref(true);
const checked1 = ref(false);
</script>

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

⭐️ 温馨提示

开关处于禁用状态时不可点击

自定义开关的颜色

通过 checked-color 和 unchecked-color 可以自定义开关的颜色。

<template>
  <sb-switch v-model:checked="checked" checked-color="rgb(245, 63, 63)" unchecked-color="#14c9C9" />
</template>

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

切换拦截

设置 beforeChange 函数，函数的返回值将用于判断是否阻止切换。

<template>
  <sb-switch v-model:checked="checked1" :beforeChange="handleChangeIntercept" />
  <sb-switch v-model:checked="checked2" type="round" :beforeChange="handleChangeIntercept2" />
  <sb-switch v-model:checked="checked3" type="line" :beforeChange="handleChangeIntercept3" />
</template>

<script setup>
import { ref } from 'vue';
const checked1 = ref(false);
const checked2 = ref(false);
const checked3 = ref(false);
const handleChangeIntercept = async newValue => {
  await new Promise(resolve => setTimeout(resolve, 1000));
  return true;
};

const handleChangeIntercept2 = async newValue => {
  await new Promise(resolve => setTimeout(resolve, 500));
  if (!newValue) {
    console.error("OH, You can't change");
    return false;
  }
  return true;
};

const handleChangeIntercept3 = async newValue => {
  await new Promise((_, reject) =>
    setTimeout(() => {
      console.error('OH, Something went wrong');
      reject();
    }, 1000)
  );
  return true;
};
</script>

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

⭐️ 温馨提示

可以打开控制台查看具体效果哦

加载中状态

通过设置 loading 使开关处于加载中状态，此时开关不可点击。

<template>
  <sb-switch :loading="true" />
  <sb-switch type="round" :loading="true" />
  <sb-switch type="line" :loading="true" />
</template>

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

自定义文案

自定义开关的打开/关闭状态的文字。

<template>
  <sb-switch v-model:checked="checked">
    <template #checked> ON </template>
    <template #unchecked> OFF </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="round">
    <template #checked> ON </template>
    <template #unchecked> OFF </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="line">
    <template #checked> ON </template>
    <template #unchecked> OFF </template>
  </sb-switch>
</template>


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

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

自定义图标

自定义开关按钮上显示的图标。

<template>
  <sb-switch v-model:checked="checked">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" size="small">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="round">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="round" size="small">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="line">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>

  <sb-switch v-model:checked="checked" type="line" size="small">
    <template #checked-icon>
      <sb-icon name="check"></sb-icon>
    </template>
    <template #unchecked-icon>
      <sb-icon name="close"></sb-icon>
    </template>
  </sb-switch>
</template>


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

<style scoped>
.sb-switch {
  margin-right: 20px;
}
</style>

API

`<switch>` Props

参数名	描述	类型	默认值
checked (v-model)	绑定值	`boolean`	`-`
disabled	是否禁用	`boolean`	`false`
loading	是否为加载中状态	`boolean`	`false`
type	开关的类型	`'circle' \| 'round' \| 'line'`	`'circle'`
size	开关的大小	`'small' \| 'medium'`	`'medium'`
checked-color	选中时的开关颜色	`string`	`-`
unchecked-color	未选中时的开关颜色	`string`	`-`
before-change	switch 状态改变前的钩子，返回 false 或者返回 Promise 且被 reject 则停止切换。	`( newValue: string ) => Promise<boolean \| void> \| boolean \| void`	`-`

`<switch>` Events

事件名	描述	参数
change	值改变时触发	value: `boolean`

`<switch>` Slots

插槽名	描述	参数
checked-icon	打开状态时，按钮上的图标	-
unchecked-icon	关闭状态时，按钮上的图标	-
checked	打开状态时的文案（`type='line'`和`size='small'`时不生效）	-
unchecked	关闭状态时的文案（`type='line'`和`size='small'`时不生效）	-

开关 Switch #

基本用法 #

开关类型 #

开关尺寸 #

禁用状态 #

自定义开关的颜色 #

切换拦截 #

加载中状态 #

自定义文案 #

自定义图标 #

API #

<switch> Props #

<switch> Events #

<switch> Slots #