组件化开发 | 手把手教你实现element的Button组件
前言
在如今的前端开发中，组件化开发已经成为了流行，而Button组件在开发中更是最常用的组件之一，这篇文章将记录学习实现仿Element UI的Button组件。
为什么需要组件化编码
要知道，在实际工作中，往往是多人协作开发，而多人协作开发 在现代前端工程中，随着业务需要的扩展，工程的体积也会越来越大，如果按照传统硬编码的开发模式，随着工程的扩展，整个工程中充斥着大量重复冗余的代码，非常不利于开发者阅读，开发和维护代码，并且工程中任何一点改动都有可能造成工程的混乱，俗称代码????山。通过组件化开发，可以将高复用性的部分封装成组件，通过接收组件参数并抛出api供他人使用，可以满足大部分场景下的需求，从而大大减少工程的代码量，也提高了代码的可维护性、可复用性和可扩展性。
所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。
因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。
组件的特点
高内聚
每个组件尽可能只完成一件事/一个功能
低耦合
组件划分后，组件的开发不受其他业务影响，可以多个组件并行开发，加快开发进度
某个组件出现问题，可直接对组件进行处理，不必担心会因为修改而影响到整个工程
复用性
组件可以提供很好的提升代码的可重用性（而非可复制性），如果有其他项目需要该组件可以直接引入使用，而不是拷贝代码，拷贝资源等
扩展性
Button组件
1. 确定Button的HTML的结构
<template> <div class="button"> <button class="rz-button" :class="classes" @click="onClick" :disabled="disabled" > <div class="content"> <slot></slot> </div> </button> </div> </template> 复制代码
2. Button的样式
尺寸
element提供了除默认值以外的三种尺寸：medium、small、mini，我们在props中接收size参数，默认值为default
size: { type: String, default: 'medium', validator: (value) => { return ( ['small', 'medium', 'mini' ].includes(value) ) } }, 复制代码类型
element支持六种Button的类型primary、default、info、error、warning、success，
props: { type: { type: String, default: 'default', validator: (value) => { return ( ['primary', 'default', 'info', 'error', 'warning', 'success', ].includes(value) ) } }, } 复制代码朴素模式
与element的朴素模式按钮一致，只在样式上有所区别
props: { plain: { type: Boolean, default: false } // ... } 复制代码圆角
给Button按钮添加圆角样式
props: { round: { type: Boolean, default: false } // ... } 复制代码加载中状态
props: { loading: { type: Boolean, default: false } // ... } 复制代码禁用状态
props: { disabled: { type: Boolean, default: false } // ... } 复制代码最后在computed计算属性中得出Button的类名classes，给对应属性添加对应的类名，实现属性->样式的映射
computed: { classes() { return { [`rz-button--${this.type}`]: this.type, 'is-plain': this.plain, 'is-disabled': this.disabled, 'is-round': this.round, 'is-circle': this.circle, [`rz-button--${this.size}`]: this.size, } } } 复制代码3. 设计API
点击事件onClick
将Button点击事件API抛出供开发使用
onClick() { this.$emit('onClick') } 复制代码使用
<Button round type="primary" @onClick="handleClick" > 主要按钮 </Button> 复制代码
结言
源码请看->完整源码，如有偏差错误，欢迎指正！
作者：alexis
链接：https://juejin.cn/post/7027428260044603429