VitePressSwitch 开关
表示两种相互对立的状态间的切换，多用于触发「开/关」。
基础用法
绑定 v-model 到一个 Boolean 类型的变量。 可以使用 --zg-switch-on-color 属性与 --zg-switch-off-color 属性来设置开关的背景色。
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
const value1 = ref(true)
</script>
<template>
<ZgSwitch class="mr" v-model="value" />
<ZgSwitch v-model="value1" style="--zg-switch-on-color: #13ce66; --zg-switch-off-color: #ff4949" />
</template>
<style>
.mr {
margin-right: 10px;
}
</style><script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
const value1 = ref(true)
</script>
<template>
<ZgSwitch class="mr" v-model="value" />
<ZgSwitch v-model="value1" style="--zg-switch-on-color: #13ce66; --zg-switch-off-color: #ff4949" />
</template>
<style>
.mr {
margin-right: 10px;
}
</style>禁用状态
设置 disabled 属性，接受一个 boolean，设置true即可禁用。
禁用：
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
const value1 = ref(true)
</script>
<template>
正常：<ZgSwitch v-model="value" /> <br />
禁用：<ZgSwitch v-model="value1" disabled />
</template>
<style>
.mr {
margin-right: 10px;
}
</style><script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
const value1 = ref(true)
</script>
<template>
正常：<ZgSwitch v-model="value" /> <br />
禁用：<ZgSwitch v-model="value1" disabled />
</template>
<style>
.mr {
margin-right: 10px;
}
</style>不同尺寸
设置 size 属性，接受large / small，呈现不同的尺寸。
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(true)
const value1 = ref(true)
const value2 = ref(true)
</script>
<template>
<ZgSwitch class="mr" v-model="value" size="large" />
<ZgSwitch class="mr" v-model="value1" />
<ZgSwitch v-model="value2" size="small" />
</template>
<style>
.mr {
margin-right: 10px;
}
</style><script lang="ts" setup>
import { ref } from 'vue'
const value = ref(true)
const value1 = ref(true)
const value2 = ref(true)
</script>
<template>
<ZgSwitch class="mr" v-model="value" size="large" />
<ZgSwitch class="mr" v-model="value1" />
<ZgSwitch v-model="value2" size="small" />
</template>
<style>
.mr {
margin-right: 10px;
}
</style>文字描述
使用 active-text 属性与 inactive-text 属性来设置开关的文字描述。
OFF
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
</script>
<template>
<ZgSwitch v-model="value" activeText="ON" inactiveText="OFF" />
</template><script lang="ts" setup>
import { ref } from 'vue'
const value = ref(false)
</script>
<template>
<ZgSwitch v-model="value" activeText="ON" inactiveText="OFF" />
</template>支持自定义 value 类型
你可以设置 active-value 和 inactive-value 属性， 它们接受 boolean | string | number 类型的值。
model-value: right
<script lang="ts" setup>
import { ref } from 'vue'
const value = ref('right')
</script>
<template>
<ZgSwitch v-model="value" activeValue="right" inactiveValue="wrong" />
<h4>model-value: {{ value }}</h4>
</template><script lang="ts" setup>
import { ref } from 'vue'
const value = ref('right')
</script>
<template>
<ZgSwitch v-model="value" activeValue="right" inactiveValue="wrong" />
<h4>model-value: {{ value }}</h4>
</template>Switch Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| model-value / v-model | 绑定值，必须等于 active-value 或 inactive-value，默认为 Boolean 类型 | boolean | string | number | false |
| disabled | 是否禁用 | boolean | false |
| 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 |
| name | switch 对应的 name 属性 | string | — |
| size | 尺寸 | 'large'| 'small' | — |
Switch Events
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | switch 状态发生变化时的回调函数 | (val: boolean | string | number) => void |