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

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

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

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

2、通过添加native修饰符

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

5、效果实现

举一反三、其他类似

封装前端UI组件库--button相关推荐

Naive UI - 火热出炉！基于 Vue 3.0/TypeScript 的免费开源前端 UI 组件库
非大厂 KPI 项目!开源三天就收获 800 Star,还获得 Vue 作者尤雨溪的官方推荐. 关于 Naive UI Naive UI 是一款基于当前比较新的 Vue 3.0/TypeScript ...
PrimeVue - 基于 Vue 3 的免费开源、定制性强的前端 UI 组件库
来自国外的一个优秀的前端 UI 组件库,基于 Vue 3 很有特色,值得研究学习和上手使用. PrimeVue 介绍 PrimeVue 是一套非常优秀的 Vue UI 组件库,支持 Vue 3 的 w ...
推荐 8 个支持 Vue3 的前端 UI 组件库，免费开源、漂亮美观，涵盖常用的业务组件
Vue3 正式发布已经快2年了,今年2月也正式变成 Vue 项目的默认版本,今天分享8个优秀的 Vue3 UI 组件库. Element Plus 相关网址:https://www.thosefree ...
Element-UI 前端UI 组件库
目录 Element-UI 前端UI 组件库配置Element-UI 组件库通过 UI 界面方式实现配置插件遇到的问题 Element-UI 前端UI 组件库个人博客地址: Element- ...
与element-UI相媲美的前端UI组件库ArcoDesign 开源啦
ArcoDesign 是由字节跳动 GIP UED 团队和架构前端团队联合推出的企业级设计系统.在打磨了近 3 年之后,通过字节内部大量业务沉淀和验证,我们开源了 ArcoDesign 设计系统.旨在 ...
十大常用web前端UI组件库，赶紧收藏
今天主要介绍web前端常用的UI库,这些网站基本都是背靠互联网大厂,值得web前端开发者收藏,当然还是要多多学习使用. Vant 一款有赞出品轻量.可靠的的移动UI组件库,目前支持 Vue2.Vue3 ...
一些热门的前端UI组件库(附用例)
1.Vuetify(Vue) Vuetify 官网是一个纯手工精心打造的 Material 样式的 Vue UI 组件库. 不需要任何设计技能 - 创建叹为观止的应用程序所需的一切都触手可及. 这是 ...
搭建前端UI组件库（一）—— 构思
本文讲述了搭建组件库前期的准备工作.主要是为了更了解UI组件库相关的知识. 这是自己边看边想边构思写的文档(俗话说知己知彼才能百战百胜嘛)所以先了解一下组件库的相关知识.开发的干货在第二章(还没放上来 ...
热门的前端UI组件库
移动端移动端组件库名称及简述官网链接 Vant,轻量.可靠的移动端 Vue 组件库 Vant 移动端组件库 Mint UI,基于 Vue.js 的移动端组件库 MintUI 移动端组件库 Vant ...

封装前端UI组件库--button