随缘吧

切换主题

Switch 开关 ​

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

基础用法 ​

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

<template>
    <Switch v-model="switchValue"></Switch>
    <Switch v-model="switchValue" style="--vh-switch-on-color: #13ce66; --vh-switch-off-color: #ff4949;"></Switch>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const switchValue = ref(false)
</script>
<style>
.vh-switch {
    margin: 12px;
}
</style>

禁用状态 ​

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

<template>
    <Switch v-model="switchValue1"></Switch>
    <Switch v-model="switchValue2" disabled></Switch>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const switchValue1 = ref(true)
const switchValue2 = ref(true)
</script>
<style>
.vh-switch {
    margin: 12px;
}
</style>

文字描述 ​

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

ON
超出省略
<template>
    <Switch v-model="switchValue1" activeText="ON" inactiveText="OFF"></Switch>
    <Switch v-model="switchValue1" active-text="超出省略" inactive-text="超出省略"></Switch>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const switchValue1 = ref(true)
</script>
<style>
.vh-switch {
    margin: 12px;
}
</style>

自定义 value ​

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

model-value: right
model-value: 1
model-value: true
<template>
    <div class="item">
        <Switch v-model="switchValue1" activeValue="right" inactiveValue="wrong"></Switch>
        <span>model-value: {{ switchValue1 }}</span>
    </div>
    <div class="item">
        <Switch v-model="switchValue2" :activeValue="1" :inactiveValue="2"></Switch>
        <span>model-value: {{ switchValue2 }}</span>
    </div>
    <div class="item">
        <Switch v-model="switchValue3"></Switch>
        <span>model-value: {{ switchValue3 }}</span>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const switchValue1 = ref('right')
const switchValue2 = ref(1)
const switchValue3 = ref(true)
</script>
<style>
.item {
    display: flex;
    align-items: center;
}
</style>

尺寸 ​

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

<template>
    <Switch v-model="switchValue" size="large"></Switch>
    <Switch v-model="switchValue"></Switch>
    <Switch v-model="switchValue" size="small"></Switch>
</template>
<script setup>
import { ref } from 'vue'
import Switch from '@/components/Switch/Switch.vue'
const switchValue = ref(false)
</script>
<style>
/* .vh-switch {
    margin: 12px;
} */
</style>

参数 ​

属性名说明类型默认值
model-value / v-model绑定值`'string''boolean'
disabled是否禁用booleanfalse
active-textswitch 打开时的文字描述string
inactive-textswitch 的状态为 off 时的文字描述`'large''small'`
active-valueswitch 状态为 on 时的值`'string''boolean'
inactive-valueswitch 状态为 off 时的值`'string''boolean'
nameswitch 对应的 name 属性string

事件 ​

事件名说明类型
changeswitch 状态发生变化时的回调函数`(e: 'string'