Switch 开关

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

基础用法

通过标签 <NueSwitch> 声明一个开关组件。

值

通过 v-model 为开关组件绑定一个响应式值。

<template>
    <nue-div align="center">
        <nue-switch v-model="state"></nue-switch>
        <nue-text>{{ state ? '开' : '关' }}</nue-text>
    </nue-div>
</template>

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

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

大小

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

<template>
    <nue-div align="center">
        <nue-switch v-model="state" size="small"></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 设置开关描述文字是否显示。

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

<template>
    <nue-div align="center">
        <nue-switch v-model="state1" show-text />
        <nue-switch v-model="state2" 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);
</script>

禁用状态

通过属性 disabled 设置开关组件的禁用状态。

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

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

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

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

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

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

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

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

const handleBeforeSwitch = async () => {
    loading.value = true;
    await new Promise(resolve => setTimeout(resolve, 1000));
    loading.value = false;
    return true;
};
</script>