ef-design 1.0.12 → 1.0.13

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.
Files changed (5) hide show
  1. package/README.md +109 -109
  2. package/dist/design.css +1 -1
  3. package/dist/design.es.js +2597 -2583
  4. package/dist/design.umd.js +88 -88
  5. package/package.json +19 -19
package/README.md CHANGED
@@ -1,109 +1,109 @@
1
- # formDesign npm包
2
-
3
- 一个基于element plus+vue3的的可拖拽表单组件
4
-
5
- ## 1. 安装
6
-
7
- ```bash
8
- npm i ef-design
9
- yarn add ef-design
10
- pnpm add ef-design
11
- ```
12
-
13
- ## 2. 使用
14
-
15
- ### 2.1 手动全引入
16
-
17
- ```bash
18
- #在vue3项目中的main.ts文件中手动引入
19
- import efDesign from 'ef-design';
20
- #加载样式
21
- import "ef-design/dist/design.css";
22
-
23
- const app = createApp(App);
24
- app.use(efDesign);
25
- #加载element plus，否则dom节点无法正常渲染
26
- app.use(ElementPlus);
27
- app.mount("#app");
28
- ```
29
-
30
- ### 2.2. 在Vue 3.x模板中使用表单设计器组件
31
-
32
- ```bash
33
- <template>
34
- <div class="layout-tab-box">
35
- <form-design ref="formDesignRef" :form-data="formData" :key="formKey"></form-design>
36
- <el-button type="primary" @click=" <el-button type="primary" @click="submitForm">Submit</el-button>
37
- ">Submit</el-button>
38
-
39
- </div>
40
- <script setup>
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
-
45
-
46
- const submitForm = () => {
47
- let templateData = formDesignRef.value.getFormDesignJson();
48
- let formJson = formDesignRef.value.getFormJson();
49
- console.log('template data:', templateData, formJson);
50
- }
51
-
52
- onMounted(() => {
53
- let parentTemplate = JSON.parse(JSON.stringify(jsonData));
54
- formData.value = parentTemplate;
55
- formKey.value = !formKey.value;
56
- })
57
- </script>
58
-
59
- <style lang="scss" scoped>
60
- .layout-tab-box{
61
- height: calc(100vh - 225px);
62
- }
63
- </style>
64
- ```
65
-
66
- <br/>
67
-
68
- ### 2.3. 在Vue 3.x模板中使用表单渲染器组件
69
-
70
- ```html
71
- <template>
72
- <div>
73
- <form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
74
- </form-render>
75
- <el-button type="primary" @click="submitForm">Submit</el-button>
76
- </div>
77
- </template>
78
- <script setup>
79
- import { ref, reactive } from 'vue'
80
- import { ElMessage } from 'element-plus'
81
-
82
- const formJson = reactive({"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":""}})
83
- const formData = reactive({})
84
- const optionData = reactive({})
85
- const formRef = ref(null)
86
-
87
- const submitForm = () => {
88
- formRef.value.getFormData().then(formData => {
89
- // Form Validation OK
90
- alert( JSON.stringify(formData) )
91
- }).catch(error => {
92
- // Form Validation failed
93
- ElMessage.error(error)
94
- })
95
- }
96
- </script>
97
- ```
98
-
99
- ### 2.4 资源链接
100
-
101
- <hr>
102
-
103
- vForm3：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
104
-
105
- 二次开发：<a href="https://www.ganweicloud.com/docs/6.1.0/pages/d3e6d9/#%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6" target="_blank">https://www.ganweicloud.com/docs/6.1.0/pages/d3e6d9/#%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6</a>
106
-
107
- ## 3. 注意事项
108
-
109
- 可能有样式问题，建议在外层包一层div，再覆盖样式
1
+ # formDesign npm包
2
+
3
+ 一个基于element plus+vue3的的可拖拽表单组件
4
+
5
+ ## 1. 安装
6
+
7
+ ```bash
8
+ npm i ef-design
9
+ yarn add ef-design
10
+ pnpm add ef-design
11
+ ```
12
+
13
+ ## 2. 使用
14
+
15
+ ### 2.1 手动全引入
16
+
17
+ ```bash
18
+ #在vue3项目中的main.ts文件中手动引入
19
+ import efDesign from 'ef-design';
20
+ #加载样式
21
+ import "ef-design/dist/design.css";
22
+
23
+ const app = createApp(App);
24
+ app.use(efDesign);
25
+ #加载element plus，否则dom节点无法正常渲染
26
+ app.use(ElementPlus);
27
+ app.mount("#app");
28
+ ```
29
+
30
+ ### 2.2. 在Vue 3.x模板中使用表单设计器组件
31
+
32
+ ```bash
33
+ <template>
34
+ <div class="layout-tab-box">
35
+ <form-design ref="formDesignRef" :form-data="formData" :key="formKey"></form-design>
36
+ <el-button type="primary" @click=" <el-button type="primary" @click="submitForm">Submit</el-button>
37
+ ">Submit</el-button>
38
+
39
+ </div>
40
+ <script setup>
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
+
45
+
46
+ const submitForm = () => {
47
+ let templateData = formDesignRef.value.getFormDesignJson();
48
+ let formJson = formDesignRef.value.getFormJson();
49
+ console.log('template data:', templateData, formJson);
50
+ }
51
+
52
+ onMounted(() => {
53
+ let parentTemplate = JSON.parse(JSON.stringify(jsonData));
54
+ formData.value = parentTemplate;
55
+ formKey.value = !formKey.value;
56
+ })
57
+ </script>
58
+
59
+ <style lang="scss" scoped>
60
+ .layout-tab-box{
61
+ height: calc(100vh - 225px);
62
+ }
63
+ </style>
64
+ ```
65
+
66
+ <br/>
67
+
68
+ ### 2.3. 在Vue 3.x模板中使用表单渲染器组件
69
+
70
+ ```html
71
+ <template>
72
+ <div>
73
+ <form-render :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef">
74
+ </form-render>
75
+ <el-button type="primary" @click="submitForm">Submit</el-button>
76
+ </div>
77
+ </template>
78
+ <script setup>
79
+ import { ref, reactive } from 'vue'
80
+ import { ElMessage } from 'element-plus'
81
+
82
+ const formJson = reactive({"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":""}})
83
+ const formData = reactive({})
84
+ const optionData = reactive({})
85
+ const formRef = ref(null)
86
+
87
+ const submitForm = () => {
88
+ formRef.value.getFormData().then(formData => {
89
+ // Form Validation OK
90
+ alert( JSON.stringify(formData) )
91
+ }).catch(error => {
92
+ // Form Validation failed
93
+ ElMessage.error(error)
94
+ })
95
+ }
96
+ </script>
97
+ ```
98
+
99
+ ### 2.4 资源链接
100
+
101
+ <hr>
102
+
103
+ vForm3：<a href="https://www.vform666.com/" target="_blank">https://www.vform666.com/</a>
104
+
105
+ 二次开发：<a href="https://www.ganweicloud.com/docs/6.1.0/pages/d3e6d9/#%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6" target="_blank">https://www.ganweicloud.com/docs/6.1.0/pages/d3e6d9/#%E8%A1%A8%E5%8D%95%E7%BB%84%E4%BB%B6</a>
106
+
107
+ ## 3. 注意事项
108
+
109
+ 可能有样式问题，建议在外层包一层div，再覆盖样式