Switch 开关

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

基础用法

通过标签 NueSwitch 生成一个开关组件。

通过 v-model 绑定开关状态。

<template>
    <nue-div align="center" :divider="{}">
        <nue-switch v-model="state"></nue-switch>
        <nue-text>{{ stateText }}</nue-text>
    </nue-div>
</template>

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

    const state = ref(false);

    const stateText = computed(() => {
        return state.value ? '开' : '关';
    });
</script>

大小

通过属性 size 设置开关组件的大小，可选值为 small 和 large，不指定则为默认大小。

<template>
    <nue-div align="center">
        <nue-switch v-model="state" size="small"></nue-switch>
        <nue-switch v-model="state"></nue-switch>
        <nue-switch v-model="state" size="large"></nue-switch>
    </nue-div>
</template>

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

    const state = ref(false);
</script>

文字描述

通过属性 show-text 设置开关描述文字是否显示，接受 boolean 类型值，默认为 false 。

通过属性 active-text 和 inactive-text 设置开关的描述文字，接受 string 类型值，默认值分别为 I 和 O。

<template>
    <nue-div align="center" class="vp-raw">
        <nue-switch v-model="state1" show-text />
        <nue-switch
            v-model="state2"
            active-text="开"
            inactive-text="关"
            show-text
        />
        <nue-switch
            v-model="state3"
            active-text="当前状态为开"
            inactive-text="状态：关"
            show-text
        />
    </nue-div>
</template>

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

const state1 = ref(false);
const state2 = ref(false);
const state3 = ref(false);
</script>

设置禁用状态

通过属性 disabled 设置开关组件的禁用状态，接受 boolean 类型值，默认为 false 。

<template>
    <nue-div align="center">
        <nue-switch v-model="state"></nue-switch>
        <nue-switch v-model="state" disabled></nue-switch>
    </nue-div>
</template>

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

    const state = ref(false);
</script>

加载状态以及切换前的回调函数

通过属性 loading 设置开关组件的加载状态，接受 boolean 类型值，默认为 false 。

通常属性 loading 与切换前的回调函数 before-switch 搭配使用。在 before-switch 回调函数中，只有返回 Resolved Promise 或是布尔类型 ture 时才会使开关组件的状态发生改变。

<template>
    <nue-div align="center">
        <nue-switch
            v-model="state"
            show-text
            active-text="点击关闭"
            inactive-text="点击打开"
            :loading="loading"
            :before-switch="handleBeforeSwitch"
        ></nue-switch>
    </nue-div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
    import { NueMessage } from 'nue-ui';

    const state = ref(false);
    const loading = ref(false);

    const handleBeforeSwitch = async (state: boolean) => {
        loading.value = true;
        const stateText = state ? '关闭' : '打开';
        const valid = await new Promise(resolve => {
            setTimeout(() => resolve(Math.random() >= 0.3), 1000);
        });
        if (valid) {
            NueMessage.success(`${stateText}成功`);
        } else {
            NueMessage.error(`${stateText}失败`);
        }
        loading.value = false;
        return valid;
    };
</script>