组件化开发 | 手把手教你实现element的Button组件

alexis
495 阅读3分钟

「这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战」

前言

在如今的前端开发中，组件化开发已经成为了流行，而Button组件在开发中更是最常用的组件之一，这篇文章将记录学习实现仿Element UI的Button组件。

为什么需要组件化编码

要知道，在实际工作中，往往是多人协作开发，而多人协作开发 在现代前端工程中，随着业务需要的扩展，工程的体积也会越来越大，如果按照传统硬编码的开发模式，随着工程的扩展，整个工程中充斥着大量重复冗余的代码，非常不利于开发者阅读，开发和维护代码，并且工程中任何一点改动都有可能造成工程的混乱，俗称代码💩山。通过组件化开发，可以将高复用性的部分封装成组件，通过接收组件参数并抛出api供他人使用，可以满足大部分场景下的需求，从而大大减少工程的代码量，也提高了代码的可维护性、可复用性和可扩展性。

所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。  

因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。

组件的特点

  1. 高内聚
    • 每个组件尽可能只完成一件事/一个功能
  2. 低耦合
    • 组件划分后，组件的开发不受其他业务影响，可以多个组件并行开发，加快开发进度
    • 某个组件出现问题，可直接对组件进行处理，不必担心会因为修改而影响到整个工程
  3. 复用性
    • 组件可以提供很好的提升代码的可重用性（而非可复制性），如果有其他项目需要该组件可以直接引入使用，而不是拷贝代码，拷贝资源等
  4. 扩展性

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)
        )
      }
    },
}

image.png

  • 朴素模式 与element的朴素模式按钮一致，只在样式上有所区别
props: {
    plain: {
      type: Boolean,
      default: false
    }
    // ...
  }

image.png

  • 圆角 给Button按钮添加圆角样式
props: {
    round: {
      type: Boolean,
      default: false
    }
    // ...
  }

image.png

  • 加载中状态
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>

结言

源码请看->完整源码，如有偏差错误，欢迎指正！

avatar
文章
阅读
粉丝