在前端的日常开发中我们都是使用一些组件库来开发页面,但是我们的ui设计师经常不按常理出牌,经常设计一些组件库中没有的组件样式,从这个点入手我收集了一些现代风格的组件并将其封装。由于开发组件库是一个庞大的工程于是我决定从点到面,先从简单到按钮组件入手,在网上收集了一些现代风格的按钮样式,将其开发成组件。
一、组件的开发
在组件库开发过程中,我始终围绕 “现代风格” 和 “实用功能” 两个核心目标展开。
1、设计风格:贴合现代ui趋势
由于是现代风格的按钮,因此我聚焦在按钮的样式上,包括展示态,点击态,禁用态,同时提供点击事件。
2、技术实现:基于vue3
我这里并没有使用ts,由于是ui组件,更多是需要聚焦在样式上。因此当前组件只支持vue3
3、按钮类型
由于时间问题与个人问题,当前只做了四种不同风格的按钮:包括玻璃风、轻拟态、古典风、流光按钮
3.1、玻璃风
3.2、轻拟态
3.3、古典风
3.4 流光
4、后续
如果大家有更多的样式需要补充可以在仓库中提issues,或者自己开发提交mr,希望大家可以一起完善这个组件库
- 组件仓库地址:vistyleui
- 组件文档:vistyleuiDocs