封装前端UI组件库--button

1、前言

​ 模拟element封装button组件、核心原理就是我们在调用组件的时候传入属性值、button组件内部来接收这些值、并且根据这些值来实现一些效果（控制颜色显示方式等等）

2、调用方法

• 传入不同的参数值、来实现改变按钮的颜色
• 在组件中间传入自定义的汉字、来控制按钮显示的内容

 	<div>
      <my-button>默认123按钮</my-button>
      <my-button type="primary">主要按钮</my-button>
      <my-button type="success">成功按钮</my-button>
      <my-button type="info">信息按钮</my-button>
      <my-button type="warning">警告按钮</my-button>
      <my-button type="danger">危险按钮</my-button>
    </div>

3、button组件的封装

1、通过vue的props属性接收父组件传递过来的type值

 props: {
    type: {
      type: String,
      default: "",
    }
  },

2、拿到传过来的type属性之后、根据不同的值在css里面写不同类名的样式、（el-button–格式）然后动态添加到div即可

<template>
  <div
    class="el-button"  //基础样式
    :class="[			//动态添加的不同样式
      `el-button--${type}`,
    ]"
  >
    <span> <slot></slot> </span>
  </div>
</template>

3、为插槽用来动态接收组件中间包裹的文字

4、给自定义组件添加事件

1、可以通过给button组件派发一个事件、父级组件去监听该事件的触发（相当于子---->父传值）、也类似于事件的传递

2、通过添加native修饰符

• .native - 监听组件根元素的原生事件。

5、效果实现

举一反三、其他类似