UI 框架-Switch 组件

很常用的开关组件

---

需求分析

惯例先行需求分析

1. 分为选中/未被选中，两种状态
2. 可以通过点击变更选中状态
3. 不同的选中状态有不同的颜色，且有滑块处于不同的端
4. 可以指定不同的尺寸
5. 可以自定义颜色
6. 可以设置为禁用

那么可以整理出以下参数表格

参数	含义	类型	可选值	默认值
value	默认选择状态	boolean	false / true	false
size	尺寸	string	middle / small / large	middle
color	颜色	string	任意合法颜色值	#f3678e
disabled	是否禁用	boolean	false / true	false

骨架

因为具有和 button 标签一样的”点击”之功能，所以可以直接使用 button 标签来实现

然后用一个 div 来充当滑块

容易得到如下骨架

<template>
    <button
            @click="toggle"
            class="laby-swicth"
            :class="{ active: value }"
            :size="size"
            :style="{ '--color': color }"
            :disabled="disabled"
            >
        <div></div>
    </button>
</template>

功能

先 ts 声明

declare const props: {
    value: boolean;
    size?: "middle" | "small" | "large";
    color: string;
    disabled: boolean;
};
declare const context: SetupContext;

然后在 export default 中，写入我们的参数

export default {
    name: "LabySwitch",
    props: {
        value: {
            type: Boolean,
            default: false,
        },
        size: {
            type: String,
            default: "middle",
        },
        color: {
            type: String,
            default: "#f3678e",
        },
        disabled: {
            type: Boolean,
            default: false,
        },
    },
};

再补全 setup 方法

setup(props, context) {
    const toggle = () => {
        context.emit("update:value", !props.value);
    };
    return { toggle };
}

样式表

然后补全样式表

@mixin layout($r, $d) {
    $r2: $r - $d;
    display: inline-block;
    position: relative;
    border: none;
    background: #adadad;
    outline: none;
    transition: background-color 250ms;
    cursor: pointer;
    :focus {
        outline: none;
    }
    > div {
        position: absolute;
        background: white;
        border-radius: 50%;
        transition: left 250ms;
        height: $r2;
        width: $r2;
        top: $d/2;
        left: $d/2;
    }
    height: $r;
    width: $r * 2;
    border-radius: $r / 2;
    &.active {
        background: var(--color);
        > div {
            left: calc(100% - #{$r2} - #{$d/2});
    }
}
}
$r: 20px;
$d: 4px;
.laby-swicth[size="small"] {
    @include layout($r, $d);
}
.laby-swicth[size="middle"] {
    @include layout($r * 1.5, $d * 1.5);
}
.laby-swicth[size="large"] {
    @include layout($r * 2, $d * 2);
}
.laby-swicth[disabled] {
    cursor: not-allowed;
}

测试

引入文档页看一下

// src/components/Switch.vue
<template>
  <div>Switch 文档</div>
  <laby-switch v-model:value="isActive" />
</template>
<script lang="ts">
import LabySwitch from "../lib/Switch.vue";
import { ref } from "vue";
export default {
  components: {
    LabySwitch,
  },
  setup() {
    const isActive = ref(false);
    return { isActive };
  },
};
</script>

效果如图

---

感谢阅读