ERP 组件库

Appearance

开关 Switch ​

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

基本用法 ​

开关的基本用法。

代码事例
vue
<template>
  <fk-switch />
</template>

开关类型 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch />
    <fk-switch type="round"/>
    <fk-switch type="line"/>
  </fk-space>
</template>

开关尺寸 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch />
    <fk-switch size="small"/>
  </fk-space>
</template>

禁用状态 ​

禁用开关。

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch disabled/>
    <fk-switch :default-checked="true" disabled/>
    <fk-switch type="round" disabled/>
    <fk-switch :default-checked="true" type="round" disabled/>
    <fk-switch type="line" disabled/>
    <fk-switch :default-checked="true" type="line" disabled/>
  </fk-space>
</template>

自定义开关的颜色 ​

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

代码事例
vue
<template>
  <fk-switch checked-color="#F53F3F" unchecked-color="#14C9C9" />
</template>

自定义开关的值 ​

通过 checked-value 和 unchecked-value 可以自定义开关的值。

代码事例
vue

<template>
  <fk-space direction="vertical" size="large">
    <fk-switch v-model="value" checked-value="yes" unchecked-value="no" />
    <div>Current Value: {{ value }}</div>
  </fk-space>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const value = ref('');

    return {
      value
    }
  },
}
</script>

切换拦截 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch :before-change="handleChangeIntercept"/>
    <fk-switch type="round" :before-change="handleChangeIntercept2"/>
    <fk-switch type="line" :before-change="handleChangeIntercept3"/>
  </fk-space>
</template>

<script>
import { Message } from '@erp/common';

export default {
  setup() {
    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) {
        Message.error("OH, You can't change")
        return false
      }
      return true
    }

    const handleChangeIntercept3 = async (newValue) => {
      await new Promise((_, reject) => setTimeout(() => {
        Message.error("OH, Something went wrong")
        reject()
      }, 1000))
      return true
    }

    return {
      handleChangeIntercept,
      handleChangeIntercept2,
      handleChangeIntercept3
    }
  }
}
</script>

加载中状态 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch loading />
    <fk-switch type="round" loading />
    <fk-switch type="line" loading />
  </fk-space>
</template>

自定义文案 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch>
      <template #checked>
        ON
      </template>
      <template #unchecked>
        OFF
      </template>
    </fk-switch>
    <fk-switch type="round">
      <template #checked>
        ON
      </template>
      <template #unchecked>
        OFF
      </template>
    </fk-switch>

    <fk-switch text-outer>
      <template #checked>
        ON
      </template>
      <template #unchecked>
        OFF
      </template>
    </fk-switch>
    <fk-switch type="round" text-outer>
      <template #checked>
        ON
      </template>
      <template #unchecked>
        OFF
      </template>
    </fk-switch>
  </fk-space>
</template>

自定义图标 ​

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

代码事例
vue
<template>
  <fk-space size="large">
    <fk-switch>
      <template #checked-icon>
        <icon-check/>
      </template>
      <template #unchecked-icon>
        <icon-close/>
      </template>
    </fk-switch>
    <fk-switch type="round">
      <template #checked-icon>
        <icon-check/>
      </template>
      <template #unchecked-icon>
        <icon-close/>
      </template>
    </fk-switch>
    <fk-switch type="line">
      <template #checked-icon>
        <icon-check/>
      </template>
      <template #unchecked-icon>
        <icon-close/>
      </template>
    </fk-switch>
  </fk-space>
</template>

API ​

<switch> Props ​

参数名描述类型默认值版本
model-value (v-model)绑定值string|number|boolean-
default-checked默认选中状态（非受控状态）booleanfalse
disabled是否禁用booleanfalse
loading是否为加载中状态booleanfalse
type开关的类型'circle' | 'round' | 'line''circle'
size开关的大小'small' | 'medium''medium'
checked-value选中时的值string|number|booleantrue1.0.0
unchecked-value未选中时的值string|number|booleanfalse1.0.0
checked-color选中时的开关颜色string-1.0.0
unchecked-color未选中时的开关颜色string-1.0.0
before-changeswitch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换。(newValue: string | number | boolean) => Promise<boolean | void> | boolean | void-1.0.0
checked-text打开状态时的文案（type='line'和size='small'时不生效）string-1.0.0
unchecked-text关闭状态时的文案（type='line'和size='small'时不生效）string-1.0.0

<switch> Events ​

事件名描述参数
change值改变时触发value: boolean | string | number
ev: Event
focus组件获得焦点时触发ev: FocusEvent
blur组件失去焦点时触发ev: FocusEvent

<switch> Slots ​

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

基于 MIT 许可发布

版权所有 © 2023-2025 ERP Team