封装前端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、效果实现

举一反三、其他类似

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

china-yun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值