【愚公系列】《循序渐进Vue.js 3.x前端开发实践》025-案例：开发一款小巧的开关按钮组件
【摘要】 标题详情作者简介愚公搬代码头衔华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。近期荣誉2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳...
| 标题 | 详情 |
|---|---|
| 作者简介 | 愚公搬代码 |
| 头衔 | 华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，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 组件不仅能封装复用的功能，还能灵活地控制其样式和行为，实现高度可定制的开关组件。
【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）