现代风格按钮组件库的开发与全流程发布

42 阅读1分钟

在前端的日常开发中我们都是使用一些组件库来开发页面,但是我们的ui设计师经常不按常理出牌,经常设计一些组件库中没有的组件样式,从这个点入手我收集了一些现代风格的组件并将其封装。由于开发组件库是一个庞大的工程于是我决定从点到面,先从简单到按钮组件入手,在网上收集了一些现代风格的按钮样式,将其开发成组件。

一、组件的开发

在组件库开发过程中,我始终围绕 “现代风格” 和 “实用功能” 两个核心目标展开。

1、设计风格:贴合现代ui趋势

由于是现代风格的按钮,因此我聚焦在按钮的样式上,包括展示态,点击态,禁用态,同时提供点击事件。

2、技术实现:基于vue3

我这里并没有使用ts,由于是ui组件,更多是需要聚焦在样式上。因此当前组件只支持vue3

3、按钮类型

由于时间问题与个人问题,当前只做了四种不同风格的按钮:包括玻璃风、轻拟态、古典风、流光按钮

3.1、玻璃风

image.png

3.2、轻拟态

image.png

3.3、古典风

image.png

3.4 流光

image.png

4、后续

如果大家有更多的样式需要补充可以在仓库中提issues,或者自己开发提交mr,希望大家可以一起完善这个组件库