You've already forked pure-component
243 lines
6.9 KiB
Markdown
243 lines
6.9 KiB
Markdown
# UI组件库与API请求工具
|
||
|
||
一个功能强大的UI组件库和一个轻量级的API请求工具，可以帮助开发者快速构建现代化的Web应用界面。
|
||
|
||
## 功能概述
|
||
|
||
### API请求器 (`API`类)
|
||
- 支持GET和POST请求
|
||
- 可设置基础URL和请求头
|
||
- 提供请求中断功能
|
||
- 自动格式化响应数据
|
||
- 支持异步请求和回调处理
|
||
- 包含进度回调支持(POST)
|
||
|
||
### UI组件库 (`UI`类)
|
||
提供以下自定义Web组件：
|
||
|
||
1. **搜索框组件 (Search)**
|
||
- 支持前缀/后缀插槽
|
||
- 可清除内容
|
||
- 支持最大长度限制
|
||
- 支持换行显示
|
||
|
||
2. **下拉选择框组件 (Select)**
|
||
- 可自定义选项列表
|
||
- 支持选项值绑定
|
||
- 弹出式菜单
|
||
- 选中状态高亮
|
||
|
||
3. **加载指示器组件 (Loading)**
|
||
- 自定义加载文本
|
||
- 内联/全屏模式
|
||
- 显示/隐藏控制
|
||
- 内置加载动画
|
||
|
||
4. **气泡列表组件 (BubbleList)**
|
||
- 可选气泡项
|
||
- 多行滚动支持
|
||
- 自定义大小
|
||
- 选中状态标记
|
||
|
||
5. **对话框组件 (Dialog)**
|
||
- 自定义标题和内容
|
||
- 确定/取消按钮
|
||
- 显示/隐藏控制
|
||
- 支持插槽自定义内容
|
||
|
||
6. **模态框组件 (Modal)**
|
||
- 带模糊背景效果
|
||
- 居中显示
|
||
- 开/关动画
|
||
- 自定义内容
|
||
|
||
7. **选项卡组件 (Tab)**
|
||
- 水平布局
|
||
- 带描述的选项卡
|
||
- 选中高亮效果
|
||
- 切换事件
|
||
|
||
8. **提示条组件 (Tip)**
|
||
- 多种类型(info/success/warn/error)
|
||
- 自动隐藏计时器
|
||
- 关闭按钮
|
||
- 位置动画
|
||
|
||
## 安装与使用
|
||
|
||
### API请求器
|
||
|
||
- 用于发送HTTP请求，支持GET和POST方法。
|
||
- 可以设置基础URL（baseUrl）。
|
||
- 可以设置请求头（headers）。
|
||
- 支持中断请求（abort）。
|
||
- 支持异步请求。
|
||
- 提供成功和失败的回调函数。
|
||
|
||
### 方法：
|
||
|
||
1. `constructor(options)`: 初始化，可以传入配置对象（如baseUrl）。
|
||
2. `setHeaders(headers)`: 设置请求头。
|
||
3. `formatData(data)`: 格式化响应数据，尝试解析JSON。
|
||
4. `abort(callback)`: 中断请求，并执行回调。
|
||
5. `get(options)`: 发送GET请求，配置项包括url、headers、callback/success、fail/error、async等。
|
||
6. `post(options)`: 发送POST请求，配置项包括url、data、headers、progress、callback/success、fail/error、async等。
|
||
|
||
```javascript
|
||
// 创建API实例
|
||
const api = new API({ baseUrl: 'https://api.example.com' });
|
||
|
||
// GET请求
|
||
api.get({
|
||
url: '/data',
|
||
success: (data) => {
|
||
console.log('获取数据:', data);
|
||
}
|
||
});
|
||
|
||
// POST请求
|
||
api.post({
|
||
url: '/submit',
|
||
data: JSON.stringify({ name: 'John' }),
|
||
progress: (response) => {
|
||
console.log('上传进度:', response);
|
||
},
|
||
success: (data) => {
|
||
console.log('提交成功:', data);
|
||
}
|
||
});
|
||
|
||
// 中断请求
|
||
api.abort();
|
||
```
|
||
|
||
### UI组件
|
||
|
||
- 用于创建自定义元素（Web Components）。
|
||
- 包含多个内置组件：Search（搜索框）、Select（下拉框）、Loading（加载指示器）、BubbleList（气泡列表）、Dialog（对话框）、Modal（模态框）、Tab（选项卡）、Tip（提示条）。
|
||
- 每个组件都是通过继承`HTMLElement`定义的，并且可以注册为自定义元素。
|
||
- 提供了注册组件的方法`registerComponent`。
|
||
|
||
### 组件列表：
|
||
|
||
1. **Search (搜索框)**
|
||
- 属性：value, placeholder, disabled, max, wrap
|
||
- 事件：change, enter, blur, focus
|
||
- 方法：clear()
|
||
2. **Select (下拉框)**
|
||
- 属性：placeholder, list（选项列表，逗号分隔）, value（选项值，逗号分隔）, current（当前选中索引）, disabled, focus
|
||
- 事件：change
|
||
- 方法：reset(), addOption()
|
||
3. **Loading (加载指示器)**
|
||
- 属性：content（加载文本）, inline（是否内联）, hidden（是否隐藏）
|
||
- 方法：show(), hide()
|
||
4. **BubbleList (气泡列表)**
|
||
- 属性：list（列表项，逗号分隔）, value（值，逗号分隔）, current（当前选中索引）, disabled, rows（显示行数）, size（气泡大小）, selected（当前选中值）
|
||
- 事件：change
|
||
- 方法：add(), clear(), select()
|
||
5. **Dialog (对话框)**
|
||
- 属性：subtitle（标题）, content（内容）, hidden
|
||
- 事件：show, hide
|
||
- 方法：show(), hide(), set()
|
||
6. **Modal (模态框)**
|
||
- 属性：subtitle, content, hidden
|
||
- 事件：open, close
|
||
- 方法：open(), close(), animate()
|
||
7. **Tab (选项卡)**
|
||
- 属性：list（选项卡列表，格式为"标题>描述|标题>描述"，用|分隔）, current（当前索引）
|
||
- 事件：change
|
||
8. **Tip (提示条)**
|
||
- 属性：content, type（info/success/warn/error）, hidden, timeout（自动隐藏时间）
|
||
- 方法：show(), hide(), animate()
|
||
|
||
### 图标（Icon）
|
||
|
||
- 提供两个SVG图标：clear（清除）和task（任务）。
|
||
|
||
### 注册组件
|
||
|
||
在`UI`的构造函数中，传入一个组件名称数组（如`['ui-search', 'ui-select']`），则会自动注册这些组件。也可以使用`registerComponent`方法手动注册。
|
||
|
||
## 使用示例
|
||
|
||
### 注册组件
|
||
|
||
```javascript
|
||
const ui = new UI(['ui-search', 'ui-select', 'ui-loading', 'ui-bubble-list', 'ui-dialog', 'ui-modal', 'ui-tab', 'ui-tip']);
|
||
```
|
||
|
||
### 在HTML中使用
|
||
|
||
```html
|
||
<ui-search placeholder="搜索..."></ui-search>
|
||
<ui-select list="选项1,选项2" value="1,2"></ui-select>
|
||
<ui-loading content="加载中..."></ui-loading>
|
||
<ui-bubble-list list="气泡1,气泡2" value="1,2" rows="1"></ui-bubble-list>
|
||
<ui-dialog subtitle="提示" content="这是一个对话框"></ui-dialog>
|
||
<ui-modal subtitle="标题" content="模态框内容"></ui-modal>
|
||
<ui-tab list="选项卡1>描述1|选项卡2>描述2"></ui-tab>
|
||
<ui-tip content="提示信息" type="info"></ui-tip>
|
||
```
|
||
|
||
## 自定义样式
|
||
|
||
所有组件都支持通过CSS变量进行样式自定义：
|
||
|
||
```css
|
||
/* 全局样式自定义 */
|
||
:root {
|
||
/* 搜索框 */
|
||
--background-color: #f5f5f5;
|
||
--border-color: #ddd;
|
||
|
||
/* 下拉框 */
|
||
--hover-background-color: #eef2ff;
|
||
|
||
/* 加载指示器 */
|
||
--mask-color: rgba(255, 255, 255, 0.8);
|
||
|
||
/* 气泡列表 */
|
||
--background-color: #4f46e5;
|
||
|
||
/* 对话框 */
|
||
--border-radius: 12px;
|
||
|
||
/* 提示条 */
|
||
--color: #3b82f6;
|
||
}
|
||
```
|
||
|
||
## 内置图标
|
||
|
||
组件库提供两个内置SVG图标：
|
||
1. 清除图标 (Icon.clear)
|
||
2. 任务图标 (Icon.task)
|
||
|
||
## 浏览器兼容性
|
||
|
||
- 现代浏览器(Chrome, Firefox, Edge最新版本)
|
||
- 需要支持Web Components和Shadow DOM
|
||
|
||
## 注意事项
|
||
|
||
1. 所有UI组件都是自定义HTML元素，使用Shadow DOM封装
|
||
2. 组件属性可以通过JavaScript或HTML属性设置
|
||
3. 组件会触发自定义事件，可通过addEventListener监听
|
||
4. API请求器使用XMLHttpRequest实现
|
||
|
||
## 扩展开发
|
||
|
||
可以通过继承UI类并调用registerComponent方法添加新的自定义组件：
|
||
|
||
```javascript
|
||
class MyComponent extends HTMLElement {
|
||
// 组件实现
|
||
}
|
||
|
||
// 注册新组件
|
||
ui.registerComponent('my-component', MyComponent);
|
||
```
|
||
|
||
## 贡献指南
|
||
|
||
欢迎提交Pull Request或Issue报告问题。请确保代码风格一致并通过基本测试。 |