JView UI

Appearance

Switch 组件，即开关组件，通常用于两种状态之间的切换。

与 Checkbox 组件的不同之处在于，Switch 组件通常在切换时就发生状态修改，而 Checkbox 通常在点击后还需要配合表单按钮的提交操作。

基本展示 ​

展开查看代码
vue
<template>
    <j-switch v-model:checked="isChecked" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)
</script>
<template>
    <j-switch v-model:checked="isChecked" />
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)
</script>

定制内容 ​

通过checkedChildren和uncheckedChildren定制开启和关闭状态下的内容，可以是文本，也可以是高度自定义的插槽。

展开查看代码
vue
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked2">
            <template #checkedChildren>
                <Check />
            </template>
            <template #uncheckedChildren>
                <X />
            </template>
        </j-switch>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Check, X } from '@jview/icons'

const isChecked = ref(false)
const isChecked2 = ref(false)
</script>
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked2">
            <template #checkedChildren>
                <Check />
            </template>
            <template #uncheckedChildren>
                <X />
            </template>
        </j-switch>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Check, X } from '@jview/icons'

const isChecked = ref(false)
const isChecked2 = ref(false)
</script>

定制值 ​

通过checkedValue和uncheckedValue定制开启和关闭状态下的值，默认是布尔值，你也可以指定字符串或者数值。

展开查看代码
vue
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" checkedChildren="开" uncheckedChildren="关" :checked-value="1" :unchecked-value="0" />

        <j-switch v-model:checked="isChecked2" checked-value="1" unchecked-value="2">
            <template #checkedChildren>
                <Check />
            </template>
            <template #uncheckedChildren>
                <X />
            </template>
        </j-switch>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Check, X } from '@jview/icons'

const isChecked = ref(1)
const isChecked2 = ref('2')
</script>
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" checkedChildren="开" uncheckedChildren="关" :checked-value="1" :unchecked-value="0" />

        <j-switch v-model:checked="isChecked2" checked-value="1" unchecked-value="2">
            <template #checkedChildren>
                <Check />
            </template>
            <template #uncheckedChildren>
                <X />
            </template>
        </j-switch>
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Check, X } from '@jview/icons'

const isChecked = ref(1)
const isChecked2 = ref('2')
</script>

加载中和禁用状态 ​

loading属性控制加载中状态，你可以结合一些异步操作指定loading属性的值。

disabled属性控制禁用开关操作。

展开查看代码
vue
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" loading />

        <j-switch v-model:checked="isChecked2" disabled />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)

const isChecked2 = ref(false)
</script>
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" loading />

        <j-switch v-model:checked="isChecked2" disabled />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)

const isChecked2 = ref(false)
</script>

修改尺寸 ​

size属性提供两种内置的开关大小，即default和small，默认是default。

如果你对开关尺寸有更高的定制需求，sliderSize属性更适合，此时一般搭配style控制width，使得开关的宽高看起来更加协调。

展开查看代码
vue
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" size="small" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked2" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked3" checkedChildren="开" uncheckedChildren="关" :slider-size="24" style="width: 60px" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)

const isChecked2 = ref(false)

const isChecked3 = ref(true)
</script>
<template>
    <j-space>
        <j-switch v-model:checked="isChecked" size="small" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked2" checkedChildren="开" uncheckedChildren="关" />

        <j-switch v-model:checked="isChecked3" checkedChildren="开" uncheckedChildren="关" :slider-size="24" style="width: 60px" />
    </j-space>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const isChecked = ref(false)

const isChecked2 = ref(false)

const isChecked3 = ref(true)
</script>

属性 ​

参数说明类型默认值必填
checked当前是否为开启状态string | number | booleanfalse否
checkedValue开启状态的值string | number | booleantrue否
uncheckedValue关闭状态的值string | number | booleanfalse否
checkedChildren开启时显示的内容，支持字符串/属性/插槽string | VNode无否
uncheckedChildren未开启时显示的内容，支持字符串/属性/插槽string | VNode无否
loading是否为加载中状态booleanfalse否
size开关尺寸，内置 default 和 small 两种"default" | "small"'default'否
sliderSize滑块大小number无否
disabled禁用状态boolean无否

Copyright © 2022-2024 All Rights Reserved by Tusi.