【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件

原创

愚公搬代码

发布于 2025-07-07 19:51:55

2700

文章被收录于专栏：循序渐进Vue.js 3.x前端开发实践循序渐进Vue.js 3.x前端开发实践

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

在现代 web 开发中，用户界面的交互性和美观性对用户体验至关重要。开关按钮作为一种常见的交互元素，广泛应用于设置、控制和状态切换等场景。如何设计和实现一个小巧而高效的开关按钮组件，不仅能够提升用户体验，还能增强应用的整体美感。

本篇文章将通过一个实际案例，带你逐步开发一款小巧的开关按钮组件。我们将从组件的设计理念入手，探讨如何使用 Vue.js 的特性来构建一个灵活、可复用的开关按钮。文章中将涵盖组件的基本结构、样式设计、状态管理以及与父组件的交互等方面，帮助你掌握开发自定义组件的关键技巧。

🚀一、案例：开发一款小巧的开关按钮组件

🔎1.HTML 部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue开关组件</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="Application">
        <!-- 开关组件1 -->
        <my-switch @switch-change="change1" switch-style="mini" background-color="green" border-color="green" color="blue"></my-switch>
        <div>开关状态:{{state1}}</div>
        <br/>
        <!-- 开关组件2 -->
        <my-switch @switch-change="change2" switch-style="normal" background-color="blue" border-color="blue" color="red"></my-switch>
        <div>开关状态:{{state2}}</div>
    </div>
    <script>
        ...
    </script>
</body>
</html>

🦋1.1 功能说明

my-switch 是自定义的 Vue 组件，表示一个开关。组件接收多个 props 来控制样式，并通过 @switch-change 事件将状态变化传递到父组件。
- @switch-change="change1" 和 @switch-change="change2" 表示当开关状态变化时，分别调用父组件中的 change1 和 change2 方法。
- switch-style、background-color、border-color 和 color 是传递给 my-switch 组件的自定义样式属性。
- state1 和 state2 是父组件中的响应式变量，表示两个开关的状态（开或关）。

🔎2.JavaScript 部分解析

🦋2.1 创建 Vue 应用和组件

const { createApp, ref, computed } = Vue;
const App = createApp({
    setup() {
        // 父组件中的响应式数据
        const state1 = ref("关");
        const state2 = ref("关");

        // 方法：切换开关1的状态
        const change1 = (isOpen) => {
            state1.value = isOpen ? "开" : "关";
        };

        // 方法：切换开关2的状态
        const change2 = (isOpen) => {
            state2.value = isOpen ? "开" : "关";
        };

        return { state1, state2, change1, change2 };
    }
});

🦋2.2 说明

createApp：用于创建 Vue 应用实例。
ref：创建响应式数据，state1 和 state2 存储开关的状态，初始值均为 "关"。
change1 和 change2 是父组件中定义的函数，分别用来处理开关状态的变化，isOpen 参数表示开关的当前状态（true 为开启，false 为关闭）。

🦋2.3 开关组件（`my-switch`）

const switchComponent = {
    // 定义的外部属性
    props: ["switchStyle", "borderColor", "backgroundColor", "color"],
    emits: ["switchChange"],
    // 内部属性，控制开关状态
    setup(props, ctx) {
        const isOpen = ref(false);  // 控制开关的状态
        const left = ref('0px');    // 控制开关按钮的位置

        // 计算属性：根据开关样式和状态来设置开关背景的CSS样式
        const cssStyleBG = computed(() => {
            if (props.switchStyle == "mini") {
                return `position: relative; border-color: ${props.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 30px; background-color: ${isOpen.value ? props.backgroundColor : 'white'};`;
            } else {
                return `position: relative; border-color: ${props.borderColor}; border-width: 2px; border-style: solid;width:55px; height: 30px;border-radius: 10px; background-color: ${isOpen.value ? props.backgroundColor : 'white'};`;
            }
        });

        // 计算属性：根据开关样式和状态来设置开关按钮的CSS样式
        const cssStyleBtn = computed(() => {
            if (props.switchStyle == "mini") {
                return `position: absolute; width: 30px; height: 30px; left:${left.value}; border-radius: 50%; background-color: ${props.color};`;
            } else {
                return `position: absolute; width: 30px; height: 30px; left:${left.value}; border-radius: 8px; background-color: ${props.color};`;
            }
        });

        // 切换开关状态的点击事件
        const click = () => {
            isOpen.value = !isOpen.value; // 切换开关状态
            left.value = isOpen.value ? '25px' : '0px'; // 移动按钮
            ctx.emit('switchChange', isOpen.value); // 触发 switchChange 事件，传递新状态
        };

        return { isOpen, left, cssStyleBG, cssStyleBtn, click };
    },
    template: `
        <div :style="cssStyleBG" @click="click">
            <div :style="cssStyleBtn"></div>
        </div>
    `
};

🦋2.4 说明

props：
- switchStyle、borderColor、backgroundColor 和 color 是传递给组件的自定义属性，用于设置开关的外观样式。
emits：
- switchChange：通过 $emit 触发事件，向父组件传递开关的状态变化。
setup：
- isOpen 是一个响应式变量，表示开关的开/关状态。
- left 控制开关按钮的位置，状态为 true 时，按钮位置是 '25px'，为 false 时，按钮位置是 '0px'。
- cssStyleBG 和 cssStyleBtn：使用计算属性动态生成开关背景和按钮的 CSS 样式。
- click：切换开关状态并通过 ctx.emit('switchChange', isOpen.value) 触发 switchChange 事件，将开关的当前状态传递给父组件。

🦋2.5 模板部分

:style="cssStyleBG" 和 :style="cssStyleBtn"：绑定计算出来的 CSS 样式到元素上，实现动态样式。
@click="click"：点击开关时调用 click 方法，切换开关状态。

🔎3.Vue 实例挂载

App.component("my-switch", switchComponent);
App.mount("#Application");

🦋3.1 说明

App.component("my-switch", switchComponent)：注册 my-switch 组件，使其在整个 Vue 应用中可用。
App.mount("#Application")：将 Vue 应用挂载到 id="Application" 的 DOM 元素上，启动 Vue 实例。

🔎4.总结

自定义开关组件：
- my-switch 组件是一个自定义的开关，支持通过 props 动态设置样式，包括 switchStyle（开关样式）、borderColor（边框颜色）、backgroundColor（背景颜色）和 color（按钮颜色）。
- 开关的状态通过 isOpen 变量控制，点击时通过 click 方法切换状态，并通过 ctx.emit 向父组件传递状态变化事件。
父组件控制开关状态：
- 父组件使用 @switch-change 监听开关状态变化，分别调用 change1 和 change2 方法来更新 state1 和 state2 的值，显示开关的当前状态。
动态样式和响应式：
- 使用计算属性 (computed) 动态计算并更新开关的 CSS 样式，实现样式的自适应变化。

通过这样的方式，Vue 组件不仅能封装复用的功能，还能灵活地控制其样式和行为，实现高度可定制的开关组件。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S14#新手村

登录后参与评论

0 条评论

热度

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件

🚀前言

🚀一、案例：开发一款小巧的开关按钮组件

🔎1.HTML 部分

🦋1.1 功能说明

🔎2.JavaScript 部分解析

🦋2.1 创建 Vue 应用和组件

🦋2.2 说明

🦋2.3 开关组件（`my-switch`）

🦋2.4 说明

🦋2.5 模板部分

🔎3.Vue 实例挂载

🦋3.1 说明

🔎4.总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件

【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件

🚀前言

🚀一、案例：开发一款小巧的开关按钮组件

🔎1.HTML 部分

🦋1.1 功能说明

🔎2.JavaScript 部分解析

🦋2.1 创建 Vue 应用和组件

🦋2.2 说明

🦋2.3 开关组件（my-switch）

🦋2.4 说明

🦋2.5 模板部分

🔎3.Vue 实例挂载

🦋3.1 说明

🔎4.总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

🦋2.3 开关组件（`my-switch`）