Switch 开关

表示两种相互对立的状态间的切换，多用于触发「开/关」。

基础用法

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

<script lang="ts" setup>
import { ref } from 'vue'
import SiSwitch from '@/components/Switch/Switch.vue'

const SwitchValue = ref(false)
</script>

<template>
  <div>
    <SiSwitch v-model="SwitchValue" />
  </div>
</template>

尺寸

<script lang="ts" setup>
import { ref } from 'vue'
import SiSwitch from '@/components/Switch/Switch.vue'

const SwitchValue = ref(false)
</script>

<template>
  <div>
    <SiSwitch
      v-model="SwitchValue"
      size="large"
    />
    <br>
    <SiSwitch v-model="SwitchValue" />
    <br>
    <SiSwitch
      v-model="SwitchValue"
      size="small"
    />
  </div>
</template>

文字描述

使用active-text属性与inactive-text属性来设置开关的文字描述。

否

<script lang="ts" setup>
import { ref } from 'vue'
import SiSwitch from '@/components/Switch/Switch.vue'

const SwitchValue = ref(false)
</script>

<template>
  <div>
    <SiSwitch
      v-model="SwitchValue"
      active-text="是"
      inactive-text="否"
    />
  </div>
</template>

扩展的 value 类型

你可以设置 active-value 和 inactive-value 属性， 它们接受 Boolean、String 或 Number 类型的值。

<script lang="ts" setup>
import { ref } from 'vue'
import SiSwitch from '@/components/Switch/Switch.vue'
import SiTooltip from '@/components/Tooltip/Tooltip.vue'

const value = ref('100')
</script>

<template>
  <div>
    <SiTooltip
      :content="`Switch value: ${value}`"
      placement="top"
    >
      <SiSwitch
        v-model="value"
        active-value="100"
        inactive-value="0"
      />
    </SiTooltip>
  </div>
</template>

禁用状态

设置disabled属性，接受一个Boolean，设置true即可禁用。

<script lang="ts" setup>
import { ref } from 'vue'
import SiSwitch from '@/components/Switch/Switch.vue'

const SwitchValue1 = ref(true)
const SwitchValue2 = ref(false)
</script>

<template>
  <div>
    <SiSwitch v-model="SwitchValue1" disabled />
    <SiSwitch v-model="SwitchValue2" />
  </div>
</template>

API

Attributes

属性名	说明	类型	Default
v-model	绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型	boolean / string / number	false
disabled	是否禁用	boolean	false
size	switch 的大小	small / large	—
active-text	switch 打开时的文字描述	string	''
inactive-text	switch 的状态为 off 时的文字描述	string	''
active-value	switch 状态为 on 时的值	boolean / string / number	true
inactive-value	switch的状态为 off 时的值	boolean / string / number	false

事件

事件名	说明	Type
change	switch 状态发生变化时的回调函数	Function