Switch 开关

用于两个互斥选项，多用于触发「开/关」

基本用法

不带描述，最基础的开关。

无默认值

有默认值（非受控）

有固定值（受控）

一般用法

v-model 用法

<template>
  <h4>无默认值</h4>
  <i-switch />
  <h4>有默认值（非受控）</h4>
  <i-switch :defaultValue="currentVal" />
  <h4>有固定值（受控）</h4>
  <i-switch :modelValue="currentVal" />
  <h4>一般用法</h4>
  <i-switch :modelValue="currentVal" @change="handleChange" />
  <h4>v-model 用法</h4>
  <i-switch v-model="currentVal" />
</template>

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

const currentVal = ref(true)

const handleChange = (val) => {
  console.log(val)
  currentVal.value = val
}
</script>

显示代码复制代码复制代码

自定义颜色

提供 inactiveColor 和 activeColor 属性控制开关关闭和打开时的颜色。

<template>
  <div class="idesign-demo-block-row">
    <i-switch inactiveColor="#65b687" />
    <i-switch activeColor="#65b687" />
    <i-switch inactiveColor="#ec7491" activeColor="#65b687" />
  </div>
</template>

显示代码复制代码复制代码

不同尺寸

提供 small、medium（默认）、large 三种尺寸的开关。

<template>
  <div className="idesign-demo-block-row">
    <i-switch size="small" />
    <i-switch size="medium" />
    <i-switch size="large" />
  </div>
</template>

显示代码复制代码复制代码

带描述内容的开关

提供 inactiveLabel 和 activeLabel 插槽展示开关关闭和打开时的描述标签。

<template>
  <div className="idesign-demo-block-column">
    <div className="idesign-demo-block-row">
      <i-switch size="small">
        <template #inactiveLabel>关</template>
        <template #activeLabel>开</template>
      </i-switch>
      <i-switch size="medium">
        <template #inactiveLabel>关</template>
        <template #activeLabel>开</template>
      </i-switch>
      <i-switch size="large">
        <template #inactiveLabel>关</template>
        <template #activeLabel>开</template>
      </i-switch>
    </div>
    <div className="idesign-demo-block-row">
      <i-switch size="small">
        <template #inactiveLabel>
          <i-icon name="Close" />
        </template>
        <template #activeLabel>
          <i-icon name="Check" />
        </template>
      </i-switch>
      <i-switch size="medium">
        <template #inactiveLabel>
          <i-icon name="Close" />
        </template>
        <template #activeLabel>
          <i-icon name="Check" />
        </template>
      </i-switch>
      <i-switch size="large">
        <template #inactiveLabel>
          <i-icon name="Close" />
        </template>
        <template #activeLabel>
          <i-icon name="Check" />
        </template>
      </i-switch>
    </div>
  </div>
</template>

显示代码复制代码复制代码

禁用状态

可以使用 disabled 属性来定义开关是否被禁用，该属性接受一个 Boolean 类型的值。

<template>
  <i-switch disabled />
</template>

显示代码复制代码复制代码

加载中的状态

提供 loading 属性控制开关是否为加载状态。

<template>
  <div className="idesign-demo-block-row">
    <i-switch size="small" loading />
    <i-switch size="medium" loading />
    <i-switch size="large" loading :defaultValue="true" />
  </div>
</template>

显示代码复制代码复制代码

Switch Attributes

属性	说明	类型	默认值
size	开关尺寸	"small"〡"medium"〡"large"	medium
inactiveColor	开关关闭时的颜色	string	--
activeColor	开关打开时的颜色	string	--
disabled	是否禁用组件	boolean	false
loading	是否为加载状态	boolean	false
modelValue / v-model	开关值	boolean	--
defaultValue	开关默认值	boolean	false

Switch Slots

插槽名	说明
inactiveLabel	开关关闭的描述标签
activeLabel	开关打开的描述标签

Switch Events

属性	说明	类型	默认值
change	切换开关时触发	(value: boolean) => void	--