这是我在学习 Vue 中写的一个 UI 框架,希望对你有用。可查看 官方文档 预览 👀
-
添加 css 样式
使用此框架前,请再 css 中开启 border-box
*, *::before, *::after { box-sizing: border-box; }
IE8 及以上浏览器均支持此样式
你还需要设置默认样式等变量(后续会改为 SCSS 变量)
:root { --button-height: 32px; --button-bg: white; --button-active-bg: #eee; --font-size: 14px; --border-radius: 4px; --color: #999; --border-color: #999; --border-color-hover: #666; }
IE15 及以上浏览器均支持此样式
-
安装 echo-wheel
npm install --save echo-wheel
或者yarn add echo-wheel
-
引入 echo-wheel
import { Button } from 'echo-wheel' import 'echo-wheel/dist/echo-wheel.css' export defult { components: { 'w-button': Button } }
-
使用组件
<w-buttton>欢迎使用轮子组件<w-button>
欢迎 提issue
- 简单轮子:按钮(Button)、输入框(Input)、网格(Grid)、布局(Layout)、提示(Toast)、标签页(Tabs)、弹出层(Popover)、折叠面板(Collapse)
- 进阶轮子:级联选择(Cascader)、无缝轮播(Slides)、响应式导航条(Nav)、分页(Pager)、表单验证(Validate)、图片上传(Uploader)、粘滞组件(Sticky)
- 高级轮子:滚动条(Scroll)、日期选择器(DatePicker)、表格(Table)
详情变更记录在 releases.
可扫描以下二维码添加本人微信公众号留言😄
![](/img/Echo_252545095.jpg)
每个分支名称代表完成组件名,目前提交顺序是
button-and-input
->row-and-col
->grid-and-layout
->toast
->tabs
->popover
->collapse
->cascader
->slides
->nav
->validate
->page
->table
->uploader
->sticky
->date-picker
->scroll
可按照此顺序查看分支以获得具体组件完成时的提交记录,按此学习编写组件的源代码。欢迎有想法有需求的小伙伴 提issue 或者一起来造轮子 😊
感谢以下贡献者😄:
![](img/avatar.jpeg)
Copyright (c) 2019-present, Yiqiu (Echo) Zheng