Switch 开关

用于在两种状态之间切换的开关组件。

?

名称	分类	说明	类型	默认值
type	? 风格	预设主题颜色类型	'primary' | 'success' | 'warning' | 'danger' | 'info'	—
size	? 尺寸	尺寸	'large' | 'default' | 'small'	'default'
active-color	? 颜色	开启时的自定义十六进制颜色	string	—
inactive-color	? 颜色	关闭时的自定义十六进制颜色	string	—
disabled	? 状态	是否禁用	boolean	false
name	? 行为	原生 name 属性	string	—
model-value / v-model	? 内容	绑定值	boolean	false
active-text	? 内容	打开时的文字	string	—
inactive-text	? 内容	关闭时的文字	string	—
active-value	? 内容	打开时的值	boolean | string | number	true
inactive-value	? 内容	关闭时的值	boolean | string | number	false
active-icon	? 内容	开启时滑块内显示的图标名称	string	—
inactive-icon	? 内容	关闭时滑块内显示的图标名称	string	—
change	? 事件	状态改变时触发	(value: boolean) => void	—
ref	? 暴露	开关 HTML 元素	Ref<HTMLInputElement>	—

基础用法

绑定 v-model 到一个 Boolean 类型的变量。

<template>
  <div class="demo-switch">
    <px-switch v-model="value1" />
    <px-switch v-model="value2" active-text="开" inactive-text="关" />
  </div>
</template>

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

const value1 = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

类型

使用 type 属性来应用预设主题颜色。

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" type="primary" />
    <px-switch v-model="v2" type="success" />
    <px-switch v-model="v3" type="warning" />
    <px-switch v-model="v4" type="danger" />
    <px-switch v-model="v5" type="info" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(true);
const v3 = ref(true);
const v4 = ref(true);
const v5 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

自定义颜色

使用 active-color 和 inactive-color 属性来设置开启/关闭状态的自定义十六进制颜色。

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" active-color="#8b5cf6" inactive-color="#d4d4d8" />
    <px-switch v-model="v2" active-color="#f97316" />
    <px-switch v-model="v3" active-color="#ec4899" inactive-color="#6b7280" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(false);
const v3 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

不同尺寸

使用 size 属性来设置开关的大小。

<template>
  <div class="demo-switch">
    <px-switch v-model="value1" size="large" />
    <px-switch v-model="value2" />
    <px-switch v-model="value3" size="small" />
  </div>
</template>

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

const value1 = ref(true);
const value2 = ref(true);
const value3 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

图标

使用 active-icon 和 inactive-icon 属性来在开关滑块内显示图标。

<template>
  <div class="demo-switch">
    <px-switch v-model="v1" active-icon="check" inactive-icon="close" />
    <px-switch v-model="v2" active-icon="sun" inactive-icon="moon" type="warning" />
  </div>
</template>

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

const v1 = ref(true);
const v2 = ref(false);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>

禁用状态

使用 disabled 属性来禁用开关。

<template>
  <div class="demo-switch">
    <px-switch v-model="value" disabled />
    <px-switch v-model="value2" disabled />
  </div>
</template>

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

const value = ref(false);
const value2 = ref(true);
</script>

<style scoped>
.demo-switch {
  display: flex;
  align-items: center;
  gap: 20px;
}
</style>