dform-designer 0.0.1
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 +114 -0
- package/dist/designer.style.css +1 -0
- package/dist/index.umd.js +202 -0
- package/package.json +45 -0
package/README.md
ADDED
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
## 简介
|
|
2
|
+
|
|
3
|
+
Vue3.0 版本,基于 element-plus 表单设计器 仿明道云设计器
|
|
4
|
+
|
|
5
|
+
## 依赖
|
|
6
|
+
|
|
7
|
+
element-plus
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
$ npm i element-plus
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
或自行引入 cdn
|
|
14
|
+
|
|
15
|
+
## 安装
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
$ yarn
|
|
19
|
+
$ yarn dev
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### html
|
|
23
|
+
|
|
24
|
+
演示仓库
|
|
25
|
+
https://gitee.com/owen_yang/vform-designer.git
|
|
26
|
+
|
|
27
|
+
目前已发布低代码平台：
|
|
28
|
+
http://38.147.173.55:8008/ 低代码多租户平台
|
|
29
|
+
http://38.147.173.55:8088/ 低代码多应用平台
|
|
30
|
+
|
|
31
|
+
更多交流 QQ 群：780382507 欢迎大家一起交流反馈
|
|
32
|
+
|
|
33
|
+
## 使用
|
|
34
|
+
|
|
35
|
+
```
|
|
36
|
+
// 组件
|
|
37
|
+
import { FormDesign, ProForm, ProFormItem } from 'dform-designer';
|
|
38
|
+
import "dform-designer/dist/designer.style.css" //引入样式
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
```
|
|
42
|
+
<template>
|
|
43
|
+
<FormDesign ref="formDesign" formSchema="formSchema" :formProp="formProp">
|
|
44
|
+
<!--顶部插槽按钮-->
|
|
45
|
+
<template #header>
|
|
46
|
+
<el-button-group>
|
|
47
|
+
<el-button type="primary" size="mini" icon="SuccessFilled" @click="confirm()">发布</el-button>
|
|
48
|
+
</el-button-group>
|
|
49
|
+
</template>
|
|
50
|
+
</FormDesign>
|
|
51
|
+
</template>
|
|
52
|
+
<script lang="ts" setup>
|
|
53
|
+
// 表单整体配置项
|
|
54
|
+
const formProp: any = ref({
|
|
55
|
+
state: "",
|
|
56
|
+
inline: false,
|
|
57
|
+
labelPosition: "top",
|
|
58
|
+
labelWidth: "120px",
|
|
59
|
+
disabled: false,
|
|
60
|
+
labelSuffix: "",
|
|
61
|
+
});
|
|
62
|
+
// 初始化表单数据
|
|
63
|
+
const formSchema: any = ref([
|
|
64
|
+
{
|
|
65
|
+
type: "Text",
|
|
66
|
+
formItem: { required: true },
|
|
67
|
+
col: { span: 24 },
|
|
68
|
+
label: "名称",
|
|
69
|
+
prop: "df_mingcheng",
|
|
70
|
+
el: "el-input",
|
|
71
|
+
props: { clearable: true, placeholder: "请输入名称" },
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
type: "Text",
|
|
75
|
+
formItem: { required: false },
|
|
76
|
+
col: { span: 24 },
|
|
77
|
+
label: "描述",
|
|
78
|
+
prop: "df_miaoshu",
|
|
79
|
+
el: "el-input",
|
|
80
|
+
props: { clearable: true, placeholder: "请输入描述", type: "textarea" },
|
|
81
|
+
}
|
|
82
|
+
]);
|
|
83
|
+
</script>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
#### 交流
|
|
87
|
+
|
|
88
|
+
QQ 群：780382507
|
|
89
|
+
|
|
90
|
+
### 效果图
|
|
91
|
+
|
|
92
|
+
<br>
|
|
93
|
+
<img src="https://gitee.com/owen_yang/vform-designer/raw/master/doc/mdy1.png" height="300" >
|
|
94
|
+
<br>
|
|
95
|
+
|
|
96
|
+
### 事件
|
|
97
|
+
|
|
98
|
+
| 名称 | 说明 | 回调参数 |
|
|
99
|
+
| ---------- | ---------------- | --------------- |
|
|
100
|
+
| formProp | 表单初始化数据 | 当前配置的 json |
|
|
101
|
+
| formSchema | 设计器初始化数据 | 当前配置的 json |
|
|
102
|
+
|
|
103
|
+
### 插槽
|
|
104
|
+
|
|
105
|
+
| 名称 | 说明 |
|
|
106
|
+
| ------ | -------------- |
|
|
107
|
+
| header | 顶部工具栏插槽 |
|
|
108
|
+
|
|
109
|
+
````
|
|
110
|
+
|
|
111
|
+
## 打包
|
|
112
|
+
```sh
|
|
113
|
+
$ yarn build
|
|
114
|
+
````
|