Switch 开关

介绍

在打开和关闭状态之间进行切换。

基础用法

通过 v-model 绑定选中状态。

<vd-switch v-model="checked" />

const checked = ref(true);

自定义大小

通过 size 设置开关的大小。

<vd-switch v-model="checked" :size="20" />

const checked = ref(true);

自定义颜色

通过 color 设置开关的激活颜色，inactive-color 设置开关的未激活颜色。

<vd-switch v-model="checked" :color="'#ff976a'" inactive-color="#ee0a24" />

const checked = ref(true);

自定义图标

通过 icon 设置开关的激活图标，inactive-icon 设置开关的未激活图标。

<vd-switch v-model="checked" icon="select" inactive-icon="close" />

const checked = ref(true);

展示加载中

通过 loading 设置开关的加载中状态。

<vd-switch v-model="checked" :loading="true" />

const checked = ref(true);

禁用状态

通过 disabled 设置禁用状态，禁用状态下无法进行切换。

<vd-switch v-model="checked" disabled />

const checked = ref(true);

异步切换

通过 before-change 设置事件来处理切换状态，切换时会显示加载中状态，支持 Promise，返回 false、抛出异常 时阻止切换。

<vd-switch v-model="checked" :before-change="beforeChange" />

const checked = ref(true);

async function beforeClose(value: boolean) {
  // 处理异步逻辑
}

配合确认弹窗

<vd-switch :model-value="checked" @update:model-value="onChange" />
<vd-dialog name="demoDialog" />

import { showDialog } from 'vital-design';
import { timeout } from '@vital-design/shared';

const checked = ref(true);

async function onChange(value: boolean) {
  await showDialog({
    name: 'demoDialog',
    title: '提示',
    message: '是否确认切换？',
    showCancelButton: true,
    confirm: async () => {
      await timeout(1000);
      checked.value = value;
    }
  });
}

API

Props

参数	说明	类型	默认值
size	尺寸大小	string | number	26
icon	激活图标	IconsName	star-fill
inactive-icon	未激活图标	IconsName	-
color	激活颜色	string	-
inactive-color	未激活颜色	string	-
loading	加载中	boolean	false
loading-type	加载中类型	LoadingType	-
disabled	是否禁用	boolean	false
before-change	切换前回调	(value: boolean) => Awaitable<unknown>	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
change	切换时触发	boolean

Slots

名称	说明
icon	图标
loading	加载中