FxSwitch 开关

在两种状态间切换。不依赖任何 UI 框架，颜色走 @fx/styles 的 --color-* token。

基础用法

<template>
  <FxSwitch v-model="value" />
</template>

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

尺寸

size：large / default / small。

<template>
  <div class="row">
    <FxSwitch v-model="v1" size="large" />
    <FxSwitch v-model="v2" />
    <FxSwitch v-model="v3" size="small" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const v1 = ref(true)
const v2 = ref(true)
const v3 = ref(true)
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

文字描述

active-text / inactive-text 显示文字；inline-prompt 将文字放进圆点。

<template>
  <div class="col">
    <FxSwitch v-model="v1" active-text="Open" inactive-text="Close" />
    <FxSwitch v-model="v2" inline-prompt active-text="是" inactive-text="否" />
  </div>
</template>

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

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

自定义图标

active-icon / inactive-icon（两侧图标）及 active-action-icon / inactive-action-icon（圆点内图标），值为 FxIcon name。

<template>
  <div class="col">
    <FxSwitch
      v-model="v1"
      active-icon="ep:check"
      inactive-icon="ep:close"
    />
    <FxSwitch
      v-model="v2"
      active-text="开"
      inactive-text="关"
      active-action-icon="ep:check"
      inactive-action-icon="ep:close"
    />
  </div>
</template>

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

<style scoped>
.col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
</style>

扩展值类型

active-value / inactive-value 可为任意类型（字符串/数字等）。

<template>
  <div class="row">
    <FxSwitch
      v-model="value"
      active-value="yes"
      inactive-value="no"
    />
    <span class="val">{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const value = ref("yes")
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.val {
  color: var(--fx-text-color-secondary);
  font-size: 14px;
}
</style>

禁用

<template>
  <div class="row">
    <FxSwitch v-model="v1" disabled />
    <FxSwitch v-model="v2" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
const v1 = ref(true)
const v2 = ref(false)
</script>

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

加载中

<template>
  <FxSwitch :loading="true" />
</template>

阻止切换

before-change 返回 boolean 或 Promise<boolean>，返回 false / reject 阻止切换。

<template>
  <FxSwitch :before-change="beforeChange" />
</template>

<script setup lang="ts">
import { fxMsgBox } from "@fx/components"

function beforeChange() {
  return fxMsgBox.confirm("确定要切换吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
  })
    .then(() => true)
    .catch(() => false)
}
</script>

圆点动作图标

active-action-icon / inactive-action-icon 仅作用于圆点。

<template>
  <div class="row">
    <FxSwitch
      v-model="v1"
      active-action-icon="ep:check"
      inactive-action-icon="ep:close"
    />
    <FxSwitch
      v-model="v2"
      inline-prompt
      active-action-icon="ep:check"
      inactive-action-icon="ep:close"
    />
  </div>
</template>

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

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

圆点动作插槽

active-action / inactive-action 插槽自定义圆点内容。

<template>
  <div class="row">
    <FxSwitch v-model="v1">
      <template #active-action>
        <FxIcon name="ep:check" />
      </template>
      <template #inactive-action>
        <FxIcon name="ep:close" />
      </template>
    </FxSwitch>
  </div>
</template>

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

<style scoped>
.row {
  display: flex;
  align-items: center;
  gap: 16px;
}
</style>

API

Attributes

属性	说明	类型	默认值
v-model / modelValue	绑定值	boolean | string | number	false
disabled	是否禁用	boolean	false
loading	是否加载中	boolean	false
size	尺寸	'large' | 'default' | 'small'	default
width	宽度（数字按 px）	string | number	''
inline-prompt	文字/图标是否显示在圆点内	boolean	false
active-icon	开启时图标	string（IconString）	—
inactive-icon	关闭时图标	string（IconString）	—
active-action-icon	开启时圆点图标	string（IconString）	—
inactive-action-icon	关闭时圆点图标	string（IconString）	—
active-text	开启文字	string	''
inactive-text	关闭文字	string	''
active-value	开启时的值	boolean | string | number	true
inactive-value	关闭时的值	boolean | string | number	false
name	input name	string	''
before-change	切换前钩子	() => boolean | Promise<boolean>	—
tabindex	tabindex	string | number	—
aria-label	原生 aria-label	string	—

Slots

插槽名	说明
active	开启时内容
inactive	关闭时内容
active-action	开启时圆点内容
inactive-action	关闭时圆点内容

Events

事件名	说明	类型
update:modelValue	值变化	(val: any) => void
change	值变化	(val: any) => void
input	值变化（input）	(val: any) => void

Exposes

方法	说明
focus	聚焦开关
checked	当前是否选中