Woo-UI

我自己的 UI 组件库

简介

这是我在学习 Vue.js 过程中基于 Vue 2.6 开发的一套 UI 组件库，包含了一些自己常用的组件，PC 端和移动端都可以使用。

使用 Travis CI 持续集成，使用 Mocha + Chai + Karma 编写并完成单元测试，测试覆盖率达到 85% 以上。

官方文档点 这里 预览。

其中部分组件的样式结构与 API 的设计借鉴了一些我使用过的成熟 UI 框架，例如 Element 和 Ant Design Vue 等

注意：玩具项目，请不要在生产环境中使用

开发指南

1. 添加 CSS 样式

   使用之前，请务必确保你的浏览器支持标准盒模型，即 border-box

   IE8+ 浏览器支持

   *,
   *::before,
   *::after {
     box-sizing: border-box;
   }

2. 安装

   推荐使用 npm 安装

   npm install --save woo-ui

3. 引入 woo-ui

   在 main.js 中写入以下内容，将组件注册为全局组件

   import Vue from "vue";
   import { WooButton, WooIcon } from "woo-ui";
   import { Plugin } from "woo-ui";
   import "woo-ui/dist/woo.css";
   
   Vue.use(Plugin);
   
   Vue.component("WooButton", WooButton);
   Vue.component("WooInput", WooInput);

   或者在 Vue 单文件组件的 script 标签内写入以下内容

   export default {
     name: "App",
     components: {
       WooButton,
       WooIcon,
     },
   };

已有组件

• [x] 按钮 Button
• [x] 图标 Icon
• [x] 输入框 Input
• [x] 栅格系统 Grid
• [x] 布局 Layout
• [x] 短提示 Toast
• [x] 气泡提示框 Popover
• [x] 标签页 Tabs
• [x] 折叠面板 Collapse
• [x] 级联选择器 Cascader
• [x] 轮播图 Slide
• [x] 菜单 Menu

TODO

• [ ] 表单验证
• [ ] 分页器
• [ ] 表格
• [ ] 图片上传
• [ ] Sticky 组件

开源许可

MIT License.

Copyright © 2020-present, Lil-C0der