py-test-components 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +214 -0
- package/dist/313f7dacf2076822059d.woff +0 -0
- package/dist/4520188144a17fb24a6a.ttf +0 -0
- package/dist/py-component.esm.js +2 -0
- package/dist/py-component.esm.js.LICENSE.txt +35 -0
- package/dist/py-component.js +2 -0
- package/dist/py-component.js.LICENSE.txt +35 -0
- package/package.json +42 -0
- package/src/components/PyTable.vue +280 -0
- package/src/components/PyWeather.vue +387 -0
- package/src/index.js +51 -0
- package/src/react/index.js +156 -0
- package/src/store/index.js +66 -0
- package/src/utils/api.js +101 -0
- package/src/utils/request.js +113 -0
- package/src/vue/index.js +32 -0
package/README.md
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
# PyComponent 组件库
|
|
2
|
+
|
|
3
|
+
跨框架组件库 - Vue 2 组件可被 React 使用，基于 Web Components 技术实现。
|
|
4
|
+
|
|
5
|
+
## 特性
|
|
6
|
+
|
|
7
|
+
- 🚀 **跨框架**：Vue 2 组件可被 React 无缝使用
|
|
8
|
+
- 📦 **零配置**：React 用户无需安装 Vue 和 ElementUI
|
|
9
|
+
- 🎯 **单一入口**：所有组件统一使用 `propData` 接收参数
|
|
10
|
+
- 🔒 **状态隔离**：组件库内部 store 不暴露给外部
|
|
11
|
+
- 🎨 **基于 ElementUI**：使用成熟的 UI 组件库
|
|
12
|
+
|
|
13
|
+
## 安装
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npm install py-test-component
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## 快速开始
|
|
20
|
+
|
|
21
|
+
### React 中使用
|
|
22
|
+
|
|
23
|
+
```jsx
|
|
24
|
+
import { PyTable, PyWeather, initStore } from 'py-test-component/react';
|
|
25
|
+
|
|
26
|
+
// 初始化配置
|
|
27
|
+
initStore({
|
|
28
|
+
apiKey: 'your-api-key',
|
|
29
|
+
baseUrl: 'https://api.example.com'
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
function App() {
|
|
33
|
+
const tableData = {
|
|
34
|
+
title: '用户列表',
|
|
35
|
+
columns: [
|
|
36
|
+
{ prop: 'name', label: '姓名' },
|
|
37
|
+
{ prop: 'age', label: '年龄' },
|
|
38
|
+
{ prop: 'email', label: '邮箱' }
|
|
39
|
+
],
|
|
40
|
+
data: [
|
|
41
|
+
{ name: '张三', age: 25, email: 'zhangsan@example.com' },
|
|
42
|
+
{ name: '李四', age: 30, email: 'lisi@example.com' }
|
|
43
|
+
]
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
return (
|
|
47
|
+
<div>
|
|
48
|
+
<PyTable propData={tableData} />
|
|
49
|
+
<PyWeather propData={{ city: '北京', showForecast: true }} />
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### Vue 中使用
|
|
56
|
+
|
|
57
|
+
```vue
|
|
58
|
+
<template>
|
|
59
|
+
<div>
|
|
60
|
+
<PyTable :propData="tableData" />
|
|
61
|
+
<PyWeather :propData="weatherConfig" />
|
|
62
|
+
</div>
|
|
63
|
+
</template>
|
|
64
|
+
|
|
65
|
+
<script>
|
|
66
|
+
import { PyTable, PyWeather, initStore } from 'py-test-component/vue';
|
|
67
|
+
|
|
68
|
+
// 初始化配置
|
|
69
|
+
initStore({
|
|
70
|
+
apiKey: 'your-api-key',
|
|
71
|
+
baseUrl: 'https://api.example.com'
|
|
72
|
+
});
|
|
73
|
+
|
|
74
|
+
export default {
|
|
75
|
+
components: { PyTable, PyWeather },
|
|
76
|
+
data() {
|
|
77
|
+
return {
|
|
78
|
+
tableData: {
|
|
79
|
+
title: '用户列表',
|
|
80
|
+
columns: [
|
|
81
|
+
{ prop: 'name', label: '姓名' }
|
|
82
|
+
],
|
|
83
|
+
data: [
|
|
84
|
+
{ name: '张三' }
|
|
85
|
+
]
|
|
86
|
+
},
|
|
87
|
+
weatherConfig: {
|
|
88
|
+
city: '北京'
|
|
89
|
+
}
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
};
|
|
93
|
+
</script>
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
### 浏览器直接使用
|
|
97
|
+
|
|
98
|
+
```html
|
|
99
|
+
<!DOCTYPE html>
|
|
100
|
+
<html>
|
|
101
|
+
<head>
|
|
102
|
+
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
103
|
+
</head>
|
|
104
|
+
<body>
|
|
105
|
+
<py-table id="myTable"></py-table>
|
|
106
|
+
<py-weather id="myWeather"></py-weather>
|
|
107
|
+
|
|
108
|
+
<script src="./dist/py-component.js"></script>
|
|
109
|
+
<script>
|
|
110
|
+
// 初始化配置
|
|
111
|
+
PyComponent.initStore({
|
|
112
|
+
apiKey: 'your-api-key'
|
|
113
|
+
});
|
|
114
|
+
|
|
115
|
+
// 设置数据
|
|
116
|
+
document.getElementById('myTable').propData = {
|
|
117
|
+
title: '用户列表',
|
|
118
|
+
columns: [{ prop: 'name', label: '姓名' }],
|
|
119
|
+
data: [{ name: '张三' }]
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
document.getElementById('myWeather').propData = {
|
|
123
|
+
city: '北京'
|
|
124
|
+
};
|
|
125
|
+
</script>
|
|
126
|
+
</body>
|
|
127
|
+
</html>
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## 组件列表
|
|
131
|
+
|
|
132
|
+
### PyTable 表格组件
|
|
133
|
+
|
|
134
|
+
数据展示表格，支持分页、排序、选择等功能。
|
|
135
|
+
|
|
136
|
+
**propData 参数：**
|
|
137
|
+
|
|
138
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
139
|
+
|------|------|--------|------|
|
|
140
|
+
| title | string | '数据表格' | 表格标题 |
|
|
141
|
+
| columns | array | [] | 列配置数组 |
|
|
142
|
+
| data | array | - | 表格数据（不传则通过 API 获取） |
|
|
143
|
+
| stripe | boolean | true | 是否显示斑马纹 |
|
|
144
|
+
| border | boolean | false | 是否显示边框 |
|
|
145
|
+
| pagination | boolean | true | 是否显示分页 |
|
|
146
|
+
| showIndex | boolean | true | 是否显示序号列 |
|
|
147
|
+
| showSelection | boolean | false | 是否显示选择列 |
|
|
148
|
+
| showActions | boolean | true | 是否显示操作列 |
|
|
149
|
+
| api | boolean | true | 是否通过 API 获取数据 |
|
|
150
|
+
| params | object | {} | API 请求参数 |
|
|
151
|
+
|
|
152
|
+
**事件：**
|
|
153
|
+
|
|
154
|
+
| 事件名 | 说明 | 参数 |
|
|
155
|
+
|--------|------|------|
|
|
156
|
+
| refresh | 刷新数据 | - |
|
|
157
|
+
| selection-change | 选择变化 | 选中行数组 |
|
|
158
|
+
| edit | 点击编辑 | 行数据 |
|
|
159
|
+
| delete | 点击删除 | 行数据 |
|
|
160
|
+
| size-change | 分页大小变化 | 新页大小 |
|
|
161
|
+
| page-change | 页码变化 | 新页码 |
|
|
162
|
+
|
|
163
|
+
### PyWeather 天气组件
|
|
164
|
+
|
|
165
|
+
天气信息展示组件。
|
|
166
|
+
|
|
167
|
+
**propData 参数：**
|
|
168
|
+
|
|
169
|
+
| 属性 | 类型 | 默认值 | 说明 |
|
|
170
|
+
|------|------|--------|------|
|
|
171
|
+
| city | string | '北京' | 城市名称 |
|
|
172
|
+
| showForecast | boolean | false | 是否显示预报 |
|
|
173
|
+
| mockData | object | - | 模拟天气数据 |
|
|
174
|
+
|
|
175
|
+
**事件：**
|
|
176
|
+
|
|
177
|
+
| 事件名 | 说明 | 参数 |
|
|
178
|
+
|--------|------|------|
|
|
179
|
+
| load | 数据加载完成 | 天气数据 |
|
|
180
|
+
| error | 加载失败 | 错误对象 |
|
|
181
|
+
|
|
182
|
+
## Store 配置
|
|
183
|
+
|
|
184
|
+
通过 `initStore` 初始化全局配置：
|
|
185
|
+
|
|
186
|
+
```javascript
|
|
187
|
+
initStore({
|
|
188
|
+
apiKey: 'your-api-key', // API 认证密钥
|
|
189
|
+
baseUrl: 'https://api.example.com', // API 基础地址
|
|
190
|
+
userInfo: { // 用户信息
|
|
191
|
+
name: '张三'
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
**注意：** Store 完全内部化，外部只能设置，无法读取和订阅。
|
|
197
|
+
|
|
198
|
+
## 浏览器兼容性
|
|
199
|
+
|
|
200
|
+
- Chrome/Edge 60+
|
|
201
|
+
- Firefox 63+
|
|
202
|
+
- Safari 13.1+
|
|
203
|
+
- 需要支持 Web Components 和 ES6
|
|
204
|
+
|
|
205
|
+
## 技术栈
|
|
206
|
+
|
|
207
|
+
- Vue 2.7
|
|
208
|
+
- ElementUI 2.15
|
|
209
|
+
- vue-custom-element
|
|
210
|
+
- Webpack 5
|
|
211
|
+
|
|
212
|
+
## License
|
|
213
|
+
|
|
214
|
+
MIT
|
|
Binary file
|
|
Binary file
|