ef-design 1.0.9 → 1.0.11
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 +18 -11
- package/dist/design.css +1 -1
- package/dist/design.es.js +916 -902
- package/dist/design.umd.js +8 -8
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
一个基于element plus+vue3的的可拖拽表单组件
|
|
4
4
|
|
|
5
5
|
## 1. 安装
|
|
6
|
+
|
|
6
7
|
```bash
|
|
7
8
|
npm i ef-design
|
|
8
9
|
yarn add ef-design
|
|
@@ -27,24 +28,32 @@ app.mount("#app");
|
|
|
27
28
|
```
|
|
28
29
|
|
|
29
30
|
### 2.2. 在Vue 3.x模板中使用表单设计器组件
|
|
31
|
+
|
|
30
32
|
```bash
|
|
31
33
|
<template>
|
|
32
34
|
<div class="layout-tab-box">
|
|
33
|
-
<form-design ref="formDesignRef" :form-data
|
|
35
|
+
<form-design ref="formDesignRef" :form-data="formData" :key="formKey"></form-design>
|
|
34
36
|
<el-button type="primary" @click=" <el-button type="primary" @click="submitForm">Submit</el-button>
|
|
35
37
|
">Submit</el-button>
|
|
36
38
|
|
|
37
39
|
</div>
|
|
38
40
|
<script setup>
|
|
39
|
-
const formDesignRef = ref(null)
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
|
|
41
|
+
const formDesignRef = ref(null);
|
|
42
|
+
const formData = ref({});
|
|
43
|
+
const jsonData = {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"onFormCreated":"","onFormMounted":"","onFormDataChange":""}}
|
|
44
|
+
|
|
43
45
|
|
|
44
46
|
const submitForm = () => {
|
|
45
|
-
let
|
|
46
|
-
|
|
47
|
+
let templateData = formDesignRef.value.getFormDesignJson();
|
|
48
|
+
let formJson = formDesignRef.value.getFormJson();
|
|
49
|
+
console.log('template data:', templateData, formJson);
|
|
47
50
|
}
|
|
51
|
+
|
|
52
|
+
onMounted(() => {
|
|
53
|
+
let parentTemplate = JSON.parse(JSON.stringify(jsonData));
|
|
54
|
+
formData.value = parentTemplate;
|
|
55
|
+
formKey.value = !formKey.value;
|
|
56
|
+
})
|
|
48
57
|
</script>
|
|
49
58
|
|
|
50
59
|
<style lang="scss" scoped>
|
|
@@ -57,6 +66,7 @@ const submitForm = () => {
|
|
|
57
66
|
<br/>
|
|
58
67
|
|
|
59
68
|
### 2.3. 在Vue 3.x模板中使用表单渲染器组件
|
|
69
|
+
|
|
60
70
|
```html
|
|
61
71
|
<template>
|
|
62
72
|
<div>
|
|
@@ -87,6 +97,7 @@ const submitForm = () => {
|
|
|
87
97
|
```
|
|
88
98
|
|
|
89
99
|
### 2.4 资源链接
|
|
100
|
+
|
|
90
101
|
<hr>
|
|
91
102
|
|
|
92
103
|
vForm3：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
|
|
@@ -96,7 +107,3 @@ vForm3：<a href="https://www.vform666.com/" target="_blank">https://www.vform66
|
|
|
96
107
|
## 3. 注意事项
|
|
97
108
|
|
|
98
109
|
可能有样式问题，建议在外层包一层div，再覆盖样式
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|