【封装UI组件库系列】封装Button图标组件

最新推荐文章于 2025-11-16 12:59:15 发布

原创

最新推荐文章于 2025-11-16 12:59:15 发布 · 2k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html #css #前端框架 #vue.js

本文介绍了如何使用Vue3、Vite和Sass技术封装Button组件，详细列出了所需的属性和事件，并展示了如何实现不同主题、朴素风格、加载状态等功能。文章作为UI组件库系列的一部分，旨在帮助开发者构建自己的组件库。

封装UI组件库系列第四篇·封装Button按钮组件

🌟前言

在前端开发中，大家可能已经用过各种各样的UI组件库了，现在市面上热门的有Element-ui、Ant Design等等，这些即插即用的组件库确实大大提升了开发效率，避免了很多的重复劳动，但这些组件库再怎么完善，又怎么能满足得了我们可爱的产品经理呢？所以工作中难免会需要开发公司内部的UI组件库，或者基于已有组件库进行二开。

【封装UI组件库系列】文章，将从0开始--》搭建项目--》封装八大经典功能组件--》打包组件库--》将组件库发布至npm--》使用自己封装的组件库。技术方面使用的是Vue3 + Vite + Sass 来完成一个模仿Element Plus的组件库。最终完成效果如下：

【封装UI组件库系列】建议从开篇开始阅读！！！https://blog.youkuaiyun.com/g_ing/category_12503768.html?spm=1001.2014.3001.5482

🌟封装Button组件

上一篇我们已经封装了第一个Icon组件，接下来我们就开始封装Button组件

1.分析封装组件所需支持的属性与事件

在开始敲代码前，我们需要先有个思路，要开发什么，需要什么功能，先定好，再动手：

支持的属性：

属性名	作用	类型	是否必须	默认值
type	主题颜色	String	否	default
size	大小	String	否	无
plain	是否朴素	Boolean	否	false
round	是否圆角	Boolean	否	false
circle	是否圆形	Boolean	否	false
disabled	是否禁用	Boolean	否	false
loading	是否加载中	Boolean	否	false
icon	图标	String	否	无