Fusions

Appearance

Switch 开关选择器 ​

iPhone

此组件一般用于在打开和关闭状态之间进行切换。

平台差异说明 ​

APPH5微信小程序支付宝小程序QQ小程序···
√√√√√适配中

代码示例 ​

部分功能示例，具体可参考示例程序以及文档API。

基础用法 ​

通过 v-model 绑定一个 布尔值 变量，这个变量是双向绑定的，当用户开或关选择器时，变量的值也会发生变化，在父组件的此值也会相应的变为 true 或 false。这样您不用监听 change 事件，也可以知道选择器当前处于开或者关的状态。

html
<template>
    <fu-switch v-model="checked" @change="handleChange"></fu-switch>
</template>

<script setup>
    import { ref } from 'vue';

    // data数据
    let checked = ref(false);

    // methods方法
    const handleChange = (status) => {
        // switch打开后者关闭时触发，值为true或false
        // 及时不监听此事件，checked此时也会相应的变为true或false
        // console.log(status);
    };
</script>

设置禁用Switch ​

通过 disabled 属性设置Switch为禁用状态，禁用状态下无法进行交互，禁用分为两种状态：

  • 关闭情况下的禁用，这时会在原颜色上加一个 opacity 透明度，且无法进行交互。
  • 打开情况下的禁用，这时会在原颜色上加一个 opacity 透明度，且无法进行交互。
html
<fu-switch v-model="checked" disabled></fu-switch>

设置加载中 ​

通过 loading 属性为 true，可以让 switch 处于加载中状态，此时 switch 显示一个加载动画且不可操作的。

html
<fu-switch v-model="checked" :loading="true"></fu-switch>

设置自定义颜色 ​

通过 activeColor 和 inactiveColor 属性设置 switch 的打开和关闭状态的颜色。

html
<fu-switch v-model="checked" activeColor="#13ce66" inactiveColor="#ff4949"></fu-switch>

设置自定义值 ​

通过 activeValue 和 inactiveValue 属性设置 switch 的打开和关闭状态的值, 通过 change 事件获取当前状态值。

html
<fu-switch v-model="checked" activeValue="1" inactiveValue="0"></fu-switch>

异步控制 ​

这种场景，一般发生在用户打开或关闭选择器时，需要本地或向后端请求判断，是否允许用户打开或关闭的场景。

  • 假设原来是关闭状态
  1. 通过 watch 监听 v-model 绑定的 checked 变量，当 checked 变量改变时，执行异步请求。
  2. 请求成功后，根据请求结果，设置 checked 变量为 true 或 false。
  3. 异步请求完成后，switch 会自动更新状态，同时去掉加载中状态 loading 属性设置为 false，让组件呈现出最终的状态。
  • 假设原来是打开状态
  1. 同上，通过 watch 监听 v-model 绑定的 checked 变量，当 checked 变量改变时，执行异步请求。
  2. 请求成功后，根据请求结果，设置 checked 变量为 true 或 false。
  3. 异步请求完成后，switch 会自动更新状态，同时去掉加载中状态 loading 属性设置为 false，让组件呈现出最终的状态。

注意

此示例中，我们通过 watch 监听 checked 属性为 false 的情景，在定时器模拟回调中又将 checked 属性设置为 false，会造成无限循环，所以这里引入了一个中间变量 controlStatus 来控制状态的变化。

html
<template>
    <fu-switch v-model="controlStatus" :loading="loading" @change="handleChange"></fu-switch>
</template>

<script setup>
    import { ref, watch } from 'vue';

    // data数据
    let checked = ref(false);
    let loading = ref(false);
    let controlStatus = ref(false);

    // methods方法
    const handleChange = (status) => {
        // switch 打开或者关闭时触发，值为true或false
        // console.log(status);
    };

    const getRestult = () => {
        // 通过定时器模拟向后端发起请求
        setTimeout(() => {
            controlStatus.value = true;
            // 后端允许用户关闭switch，设置checked变量为false，结束loading状态
            loading.value = false;
            checked.value = false;
        }, 2000);
    };

    // watch监听checked变量
    watch(() => checked.value, (newVal, oldVal) => {
        // newVal等于false时，用户手动关闭了switch
        if(newVal === false) {
            if(controlStatus.value === true) {
                controlStatus.value = false;
                return;
            }
        }

        // 重新打开switch，并处于加载中状态
        checked.value = true;
        loading.value = true;

        // 模拟向后端发起请求
        getRestult()
    });
</script>

API ​

Switch Props ​

属性名说明类型默认值可选值
v-model双向绑定的值Boolean｜String｜Numberfalsetrue
shape开关的形状Stringcirclesquare
disabled是否禁用Booleanfalsetrue
size开关尺寸String｜Number20-
activeColor打开时的背景色String#409eff-
inactiveColor关闭时的背景色String#dcdfe6-
activeValue打开时的值Boolean｜String｜Numbertruefalse
inactiveValue关闭时的值Boolean｜String｜Numberfalsetrue
loading是否显示加载中状态Booleanfalsetrue
leftIcon左侧图标String--
rightIcon右侧图标String--
vibrateShort是否开启短振动Booleanfalsetrue

Switch Events ​

事件名说明回调参数
input绑定值变化时触发() => void
change开关状态变化时触发() => void