@uf_lee/leeui 1.0.20 → 1.0.21
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 +70 -33
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,29 +1,54 @@
|
|
|
1
|
-
|
|
2
|
-
* @Author: 李天惊 uf_lee@163.com
|
|
3
|
-
* @Date: 2025-03-20 12:35:35
|
|
4
|
-
* @LastEditors: 李天惊 uf_lee@163.com
|
|
5
|
-
* @LastEditTime: 2025-03-27 13:04:15
|
|
6
|
-
* @FilePath: \leeui\lee_ui\README.md
|
|
7
|
-
* Copyright (c) 2025 by ${git_name_email}, All Rights Reserved.
|
|
8
|
-
-->
|
|
1
|
+
|
|
9
2
|
# LeeUI
|
|
10
3
|
|
|
11
|
-
一个支持TypeScript的简单单实例Vue 3
|
|
4
|
+
一个支持 TypeScript 的简单单实例 Vue 3 组件库，基于 `Element Plus` 进行封装，提供便捷的表单渲染功能。
|
|
5
|
+
|
|
6
|
+
## 🚀 特性
|
|
7
|
+
|
|
8
|
+
- 📌 **基于 Vue 3 + TypeScript**，类型安全，支持 Vite。
|
|
9
|
+
- 🎨 **Element Plus 兼容**，二次封装，优化开发体验。
|
|
10
|
+
- ⚡ **动态表单渲染**，支持 `schema` 配置化表单。
|
|
11
|
+
- 💡 **可扩展性强**，方便集成和定制。
|
|
12
|
+
|
|
13
|
+
## 📦 安装
|
|
12
14
|
|
|
13
|
-
|
|
14
|
-
要安装项目的依赖项，运行以下命令：
|
|
15
|
+
使用 `npm` 或 `yarn` 进行安装：
|
|
15
16
|
|
|
16
17
|
```bash
|
|
17
18
|
npm install @uf_lee/leeui
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
或
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn add @uf_lee/leeui
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## 🚀 快速开始
|
|
28
|
+
|
|
29
|
+
### 组件注册
|
|
30
|
+
|
|
31
|
+
在 `main.ts` 中引入并注册组件库：
|
|
32
|
+
|
|
33
|
+
```ts
|
|
34
|
+
import { createApp } from "vue";
|
|
35
|
+
import App from "./App.vue";
|
|
36
|
+
import LeeUI from "@uf_lee/leeui";
|
|
37
|
+
import "@uf_lee/leeui/dist/style.css"; // 可能需要引入样式
|
|
38
|
+
|
|
39
|
+
const app = createApp(App);
|
|
40
|
+
app.use(LeeUI);
|
|
41
|
+
app.mount("#app");
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
### 示例代码
|
|
18
45
|
|
|
19
|
-
```
|
|
46
|
+
```vue
|
|
20
47
|
<script setup lang="ts">
|
|
21
48
|
import { reactive, ref, onMounted } from "vue";
|
|
22
49
|
import { ElDivider } from "element-plus";
|
|
23
50
|
import { LElForm, LElFormItemCom } from "@uf_lee/leeui";
|
|
24
51
|
import type { FormSchema } from "@uf_lee/leeui/dist/types/types";
|
|
25
|
-
// import type { FormItemRule } from "element-plus";
|
|
26
|
-
// import type { FormRules } from "element-plus";
|
|
27
52
|
|
|
28
53
|
// --------------------- Autocomplete 使用的一些设置 start -------------------------
|
|
29
54
|
interface RestaurantItem {
|
|
@@ -65,25 +90,6 @@ onMounted(() => {
|
|
|
65
90
|
});
|
|
66
91
|
// --------------------- Autocomplete 使用的一些设置 end -------------------------
|
|
67
92
|
|
|
68
|
-
// const aaa = (rule: any, value: any, callback: any) => {
|
|
69
|
-
// if (value === "") {
|
|
70
|
-
// callback(new Error("Please input the password again"));
|
|
71
|
-
// } else if (value !== "222") {
|
|
72
|
-
// callback(new Error("Two inputs don't match!"));
|
|
73
|
-
// } else {
|
|
74
|
-
// callback();
|
|
75
|
-
// }
|
|
76
|
-
// };
|
|
77
|
-
|
|
78
|
-
// const rules = reactive<FormRules>({
|
|
79
|
-
// Input: [
|
|
80
|
-
// {
|
|
81
|
-
// validator: aaa,
|
|
82
|
-
// trigger: "blur",
|
|
83
|
-
// },
|
|
84
|
-
// ],
|
|
85
|
-
// });
|
|
86
|
-
|
|
87
93
|
const schema: FormSchema[] = [
|
|
88
94
|
{
|
|
89
95
|
field: "undefined",
|
|
@@ -438,3 +444,34 @@ const model: any = reactive({
|
|
|
438
444
|
<LElFormItemCom :data="schema[0]" v-model="model.undefined" />
|
|
439
445
|
<LElFormItemCom :data="schema[1]" v-model="model[schema[1].field]" />
|
|
440
446
|
</template>
|
|
447
|
+
```
|
|
448
|
+
|
|
449
|
+
## 📖 API 说明
|
|
450
|
+
|
|
451
|
+
### `LElForm` 组件
|
|
452
|
+
|
|
453
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
454
|
+
| -------- | ------ | --------------------- | ---- |
|
|
455
|
+
| `schema` | 表单配置项 | `FormSchema[]` | `[]` |
|
|
456
|
+
| `model` | 表单数据对象 | `Record<string, any>` | `{}` |
|
|
457
|
+
|
|
458
|
+
### `LElFormItemCom` 组件
|
|
459
|
+
|
|
460
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
461
|
+
| --------- | ------- | ------------ | --- |
|
|
462
|
+
| `data` | 单个表单项配置 | `FormSchema` | - |
|
|
463
|
+
| `v-model` | 绑定的数据值 | `any` | - |
|
|
464
|
+
|
|
465
|
+
## 🤝 贡献指南
|
|
466
|
+
|
|
467
|
+
欢迎贡献代码！请提交 PR 或 Issue 进行讨论。
|
|
468
|
+
|
|
469
|
+
1. Fork 本仓库。
|
|
470
|
+
2. 创建新分支：`git checkout -b feature-branch`。
|
|
471
|
+
3. 提交更改：`git commit -m 'Add some feature'`。
|
|
472
|
+
4. 推送分支：`git push origin feature-branch`。
|
|
473
|
+
5. 提交 Pull Request。
|
|
474
|
+
|
|
475
|
+
## 📜 License
|
|
476
|
+
|
|
477
|
+
[MIT](LICENSE) License
|