Switch 开关

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

基础用法

绑定 v-model 到一个 Boolean 类型的变量。可以使用 --s-switch-on-color 属性与 --s-switch-off-color 属性来设置开关的背景色。

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(true)
</script>
<template>
  <Switch v-model="test" />
</template>
<style scoped>
.s-switch {
  --s-switch-on-color:#13ce66;
  --s-switch-off-color:#ff4949
}
</style>

禁用状态

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

正常：

禁用：

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(true)
const test2 = ref(false)
</script>
<template>
  <div class="demo-switch-container">
    <div class="demo-switch-container-title">正常：</div>
    <Switch v-model="test" /> <br/>
  </div>
  <div class="demo-switch-container">
    <div class="demo-switch-container-title">禁用：</div>
    <Switch v-model="test2" disabled/>
  </div>
</template>
<style scoped>
  .demo-switch-container {
    display: flex;
    align-items: center;
  }
</style>

不同尺寸

设置 size 属性，接受large / small，呈现不同的尺寸。

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
  <div class="switch-size-container">
    <Switch v-model="test" size="large"/>
    <Switch v-model="test"/>
    <Switch v-model="test" size="small"/>
  </div>
</template>
<style scoped>
.switch-size-container {
  display: flex;
  align-items: center;
  .s-switch {
    margin-right: 10px;
  }
}
</style>

支持自定义 value 类型

你可以设置 active-value 和 inactive-value 属性，它们接受 boolean | string | number 类型的值。

model-value: right

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref('right')
</script>
<template>
  <Switch v-model="test" activeValue="right" inactiveValue="wrong"/>
  <h4>model-value: {{test}}</h4>
</template>

文字描述

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

OFF

<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const test = ref(false)
</script>
<template>
  <Switch v-model="test" activeText="ON" inactiveText="OFF"/>
</template>

Switch Attributes

参数	说明	类型	可选值	默认值
v-model / value	绑定值	boolean	—	false
disabled	是否禁用	boolean	—	false
size	开关大小，可选值为`large`、`small`、`default`或者不设置	string	large, small, default	—
active-text	打开时的文字描述	string	—	—
inactive-text	关闭时的文字描述	string	—	—
active-color	打开时的背景色	string	—	#409EFF
inactive-color	关闭时的背景色	string	—	#C0CCDA
active-value	打开时的值	boolean / string / number	—	true
inactive-value	关闭时的值	boolean / string / number	—	false
name	原生 `name` 属性	string	—	—
validate-event	输入时是否触发表单的校验	boolean	—	true

Switch Events

事件名称	说明	回调参数
change	开关状态发生变化时的回调函数	当前状态的值

Switch 开关 ​

基础用法 ​

禁用状态 ​

不同尺寸 ​

支持自定义 value 类型 ​