├── .npmignore
├── .browserslistrc
├── demo.webp
├── public
    ├── favicon.ico
    └── index.html
├── babel.config.js
├── .prettierrc.json
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   ├── bug_report.md
    │   └── question.md
    └── workflows
    │   └── main.yml
├── src
    ├── index.js
    ├── fixtures
    │   ├── extends
    │   │   ├── codemirror.js
    │   │   ├── json-editor.js
    │   │   ├── dynamic.js
    │   │   ├── bmap.js
    │   │   ├── gallery.js
    │   │   ├── video-uploader.js
    │   │   ├── quill-editor.js
    │   │   ├── upload-file.js
    │   │   ├── tree-select.js
    │   │   ├── image-uploader.js
    │   │   ├── data-editor.js
    │   │   ├── markdown-editor.js
    │   │   └── table-editor.js
    │   ├── form-item-common.js
    │   └── form-props.js
    ├── components
    │   ├── main
    │   │   ├── components
    │   │   │   ├── tpl
    │   │   │   │   ├── vue-ele-form.js
    │   │   │   │   └── f-render.js
    │   │   │   ├── preview-dialog.vue
    │   │   │   ├── code-dialog.vue
    │   │   │   ├── data-dialog.vue
    │   │   │   └── batch-dialog.vue
    │   │   ├── index.vue
    │   │   ├── main-header.vue
    │   │   └── main-content.vue
    │   ├── right
    │   │   ├── components
    │   │   │   ├── search-mixin.js
    │   │   │   ├── attrs-header.vue
    │   │   │   └── form-item-rules.vue
    │   │   ├── form-props.vue
    │   │   ├── form-item-attrs.vue
    │   │   ├── index.vue
    │   │   └── form-item-common.vue
    │   └── left
    │   │   └── index.vue
    ├── global-components.js
    ├── form-skeleton.vue
    ├── utils.js
    └── f-render.vue
├── .gitignore
├── .eslintrc.js
├── vue.config.js
├── example
    ├── App.vue
    ├── main.js
    └── AppHeader.vue
├── LICENSE
├── package.json
├── CHANGELOG.md
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .github
2 | dist/demo.html
3 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | not dead
5 | 


--------------------------------------------------------------------------------
/demo.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/f-render/HEAD/demo.webp


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dream2023/f-render/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ["@vue/cli-plugin-babel/preset"],
3 |   plugins: ["lodash"]
4 | };
5 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "none",
3 |   "tabWidth": 2,
4 |   "semi": true,
5 |   "singleQuote": false
6 | }
7 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature Request（新功能建议）
3 | about: Suggest an idea for this project
4 | ---
5 | 
6 | ## Feature request（新功能建议）
7 | 
8 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import FRender from "./f-render";
2 | 
3 | if (window !== undefined && window.Vue) {
4 |   window.Vue.component("f-render", FRender);
5 | }
6 | 
7 | export default FRender;
8 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | const isProd = process.env.NODE_ENV === "production";
 2 | module.exports = {
 3 |   root: true,
 4 |   env: {
 5 |     node: true
 6 |   },
 7 |   extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
 8 |   parserOptions: {
 9 |     parser: "babel-eslint"
10 |   },
11 |   rules: {
12 |     "no-unused-vars": isProd ? "error" : "warn",
13 |     "vue/no-unused-components": isProd ? "error" : "warn",
14 |     "no-console": isProd ? ["error", { allow: ["warn", "error"] }] : "off",
15 |     "no-debugger": isProd ? "warn" : "off"
16 |   }
17 | };
18 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/codemirror.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "codemirror",
 3 |   label: "代码编辑器",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-codemirror",
 6 |     attrs: {
 7 |       config: {
 8 |         options: {
 9 |           type: "data-editor",
10 |           label: "配置",
11 |           attrs: {
12 |             types: ["object"],
13 |             rows: 10
14 |           }
15 |         }
16 |       }
17 |     },
18 |     common: {
19 |       config: {
20 |         default: {
21 |           type: "textarea",
22 |           label: "默认值"
23 |         }
24 |       }
25 |     }
26 |   }
27 | };
28 | 


--------------------------------------------------------------------------------
/src/components/main/components/tpl/vue-ele-form.js:
--------------------------------------------------------------------------------
 1 | export default function(code) {
 2 |   return `<template>
 3 |   <ele-form
 4 |     v-bind="formConfig"
 5 |     v-model="formData"
 6 |     :request-fn="handleRequest"
 7 |     @request-success="handleRequestSuccess"
 8 |   />
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   data() {
14 |     return {
15 |       formData: {},
16 |       formConfig: ${code}
17 |     };
18 |   },
19 |   methods: {
20 |     handleRequest(data) {
21 |       console.log(data);
22 |       return Promise.resolve();
23 |     },
24 |     handleRequestSuccess() {
25 |       this.$message.success("发送成功");
26 |     }
27 |   }
28 | };
29 | </script>
30 | `;
31 | }
32 | 


--------------------------------------------------------------------------------
/src/components/main/components/tpl/f-render.js:
--------------------------------------------------------------------------------
 1 | export default function(code) {
 2 |   return `<template>
 3 |   <f-render
 4 |     v-model="formData"
 5 |     :request-fn="handleSubmit"
 6 |     @request-success="handleSuccess"
 7 |     :config="formConfig"
 8 |     pure
 9 |   />
10 | </template>
11 | 
12 | <script>
13 | export default {
14 |   data() {
15 |     return {
16 |       formData: {},
17 |       formConfig: ${code}
18 |     };
19 |   },
20 |   methods: {
21 |     handleRequest(data) {
22 |       console.log(data);
23 |       return Promise.resolve();
24 |     },
25 |     handleRequestSuccess() {
26 |       this.$message.success("发送成功");
27 |     }
28 |   }
29 | };
30 | </script>
31 | `;
32 | }
33 | 


--------------------------------------------------------------------------------
/src/components/right/components/search-mixin.js:
--------------------------------------------------------------------------------
 1 | const fuzzy = require("fuzzy");
 2 | import { objectToArr, arrToObject } from "../../../utils";
 3 | 
 4 | export default {
 5 |   data() {
 6 |     return {
 7 |       keyword: ""
 8 |     };
 9 |   },
10 |   computed: {
11 |     filteredFormDesc() {
12 |       if (this.keyword) {
13 |         // 将 formDesc 转为数组
14 |         const formDescArr = objectToArr(this.formDesc, "field");
15 |         const results = fuzzy
16 |           .filter(this.keyword, formDescArr, {
17 |             extract: item => item.label
18 |           })
19 |           .map(el => el.original);
20 |         return arrToObject(results, "field");
21 |       } else {
22 |         return this.formDesc;
23 |       }
24 |     }
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const path = require("path");
 2 | const LodashModuleReplacementPlugin = require("lodash-webpack-plugin");
 3 | const isProd = process.env.NODE_ENV === "production";
 4 | 
 5 | module.exports = {
 6 |   publicPath: isProd ? "./" : "/",
 7 |   transpileDependencies: [
 8 |     "indent-string",
 9 |     "vue-ele-form-dynamic",
10 |     "vue-ele-form/lib",
11 |     "vuedraggable"
12 |   ],
13 |   configureWebpack: {
14 |     devtool: "source-map",
15 |     entry: path.resolve(__dirname, "./example/main.js"),
16 |     resolve: {
17 |       alias: {
18 |         "f-render": path.resolve(__dirname, "./src/")
19 |       }
20 |     },
21 |     plugins: [new LodashModuleReplacementPlugin()]
22 |   },
23 |   css: {
24 |     extract: false
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
 8 |     <title><%= htmlWebpackPlugin.options.title %> | 可视化表单设计器</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong
13 |         >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
14 |         properly without JavaScript enabled. Please enable it to
15 |         continue.</strong
16 |       >
17 |     </noscript>
18 |     <div id="app"></div>
19 |     <!-- built files will be auto injected -->
20 |   </body>
21 | </html>
22 | 


--------------------------------------------------------------------------------
/src/global-components.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 此文件用于注册全局组件
 3 |  */
 4 | 
 5 | import Vue from "vue";
 6 | 
 7 | // 滚动
 8 | import PerfectScrollbar from "vue2-perfect-scrollbar";
 9 | import "vue2-perfect-scrollbar/dist/vue2-perfect-scrollbar.css";
10 | 
11 | // 扩展组件
12 | import EleFormDynamic from "vue-ele-form-dynamic";
13 | import EleFormDataEditor from "vue-ele-form-data-editor";
14 | 
15 | // 拖拽
16 | import vueDraggable from "vuedraggable/src/vuedraggable";
17 | 
18 | // 代码编辑器
19 | import { PrismEditor } from "vue-prism-editor";
20 | import "vue-prism-editor/dist/prismeditor.min.css";
21 | import "prismjs/themes/prism-tomorrow.css";
22 | 
23 | Vue.use(PerfectScrollbar);
24 | Vue.component("dynamic", EleFormDynamic);
25 | Vue.component("PrismEditor", PrismEditor);
26 | Vue.component("vue-draggable", vueDraggable);
27 | Vue.component("data-editor", EleFormDataEditor);
28 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report（报告问题）
 3 | about: Create a report to help us improve
 4 | ---
 5 | 
 6 | <!--
 7 |     注意：为更好的解决你的问题，请参考模板提供完整信息，准确描述问题，信息不全的 issue 将被关闭。
 8 | 
 9 |     Note: In order to better solve your problem, please refer to the template to provide complete information, accurately describe the problem, and the incomplete information issue will be closed.
10 | -->
11 | 
12 | ## Bug report（问题描述）
13 | 
14 | #### Steps to reproduce（问题复现步骤）
15 | 
16 | <!--
17 | 1. [xxx]
18 | 2. [xxx]
19 | 3. [xxxx]
20 | -->
21 | 
22 | #### Screenshot or Gif（截图或动态图）
23 | 
24 | #### Link to minimal reproduction（最小可在线还原 demo）
25 | 
26 | <!--
27 | Please only use Codepen, JSFiddle, CodeSandbox or a github repo
28 | -->
29 | 
30 | #### Other relevant information（格外信息）
31 | 
32 | - Vue version:
33 | - f-render version:
34 | - ElementUI version:
35 | - vue-ele-form version:
36 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/json-editor.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "data-editor",
 3 |   label: "JSON编辑器",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-upload-file",
 6 |     attrs: {
 7 |       config: {
 8 |         height: {
 9 |           type: "input",
10 |           label: "高度"
11 |         },
12 |         plus: {
13 |           type: "switch",
14 |           label: "是否显示全屏按钮"
15 |         },
16 |         options: {
17 |           type: "data-editor",
18 |           label: "配置",
19 |           attrs: {
20 |             types: ["object"]
21 |           }
22 |         }
23 |       },
24 |       data: {}
25 |     },
26 |     common: {
27 |       config: {
28 |         default: {
29 |           type: "data-editor",
30 |           label: "默认值",
31 |           attrs: {
32 |             types: ["object", "array"]
33 |           }
34 |         }
35 |       }
36 |     }
37 |   }
38 | };
39 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/question.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Question（提问）
 3 | about: Asking questions about use
 4 | ---
 5 | 
 6 | ## Question（提问）
 7 | 
 8 | <!--
 9 |     提问之前，请确定你已经过自己的努力，尝试解决过这个问题。
10 |     若是代码相关问题，请不要只截图，请提供在线 demo，以便节约彼此的时间。
11 | 
12 |     Before asking a question, please make sure that you have tried your best to solve this problem.
13 |     If it's a code-related issue, please don't just take screenshots. Please provide an online demo to save each other's time.
14 | -->
15 | 
16 | #### Steps to reproduce（问题复现步骤）
17 | 
18 | <!--
19 | 1. [xxx]
20 | 2. [xxx]
21 | 3. [xxxx]
22 | -->
23 | 
24 | #### Screenshot or Gif（截图或动态图）
25 | 
26 | #### Link to minimal reproduction（最小可在线还原 demo）
27 | 
28 | <!--
29 | Please only use Codepen, JSFiddle, CodeSandbox or a github repo
30 | -->
31 | 
32 | #### Other relevant information（格外信息）
33 | 
34 | - Vue version:
35 | - f-render version:
36 | - ElementUI version:
37 | - vue-ele-form version:
38 | 


--------------------------------------------------------------------------------
/src/components/right/form-props.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <attrs-header
 4 |       url="https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7"
 5 |       title="表单配置"
 6 |       v-model="keyword"
 7 |     />
 8 |     <ele-form
 9 |       v-model="frender.formPropsData"
10 |       :form-desc="filteredFormDesc"
11 |       :formAttrs="{ size: 'small' }"
12 |       :isShowBackBtn="false"
13 |       :isShowSubmitBtn="false"
14 |       :span="20"
15 |       labelPosition="top"
16 |     ></ele-form>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | import searchMixin from "./components/search-mixin";
22 | import AttrsHeader from "./components/attrs-header.vue";
23 | import { changeFormDescLabel } from "../../utils";
24 | export default {
25 |   inject: ["frender"],
26 |   components: { AttrsHeader },
27 |   mixins: [searchMixin],
28 |   computed: {
29 |     formDesc() {
30 |       return changeFormDescLabel(this.frender.formProps.config);
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/components/main/index.vue:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import MainHeader from "./main-header";
 3 | import MainContent from "./main-content";
 4 | 
 5 | export default {
 6 |   inject: ["frender"],
 7 |   components: {
 8 |     MainHeader,
 9 |     MainContent
10 |   },
11 |   props: {
12 |     loading: Boolean
13 |   },
14 |   render() {
15 |     const slots = this.frender.$scopedSlots;
16 |     const directives = [
17 |       {
18 |         name: "loading",
19 |         value: this.loading
20 |       }
21 |     ];
22 |     return (
23 |       <div>
24 |         {slots["main-header"] ? (
25 |           slots["main-header"]({ frender: this.frender })
26 |         ) : (
27 |           <main-header onSave={() => this.$emit("save")} />
28 |         )}
29 | 
30 |         {slots["main-content"] ? (
31 |           slots["main-content"]({ frender: this.frender })
32 |         ) : (
33 |           <main-content {...{ directives }} />
34 |         )}
35 |       </div>
36 |     );
37 |   }
38 | };
39 | </script>
40 | 


--------------------------------------------------------------------------------
/example/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <app-header
 4 |       @change="pure = !pure"
 5 |       :style="{ marginBottom: pure ? '20px' : 0 }"
 6 |     />
 7 |     <f-render
 8 |       @save="handleSave"
 9 |       :loading="loading"
10 |       height="calc(100vh - 150px)"
11 |       :config="formConfig"
12 |       v-model="formData"
13 |       :pure="pure"
14 |       :options-fn="$axios.get"
15 |     />
16 |   </div>
17 | </template>
18 | 
19 | <script>
20 | import AppHeader from "./AppHeader";
21 | 
22 | export default {
23 |   components: {
24 |     AppHeader
25 |   },
26 |   data() {
27 |     return {
28 |       loading: false,
29 |       formConfig: "",
30 |       formData: {},
31 |       pure: false
32 |     };
33 |   },
34 |   methods: {
35 |     handleSave(res) {
36 |       localStorage.setItem("form-config", res);
37 |       this.$message.success("保存成功啦~");
38 |     }
39 |   },
40 |   mounted() {
41 |     this.loading = true;
42 |     setTimeout(() => {
43 |       this.loading = false;
44 |       this.formConfig = localStorage.getItem("form-config") || "";
45 |     }, 1000);
46 |   }
47 | };
48 | </script>
49 | 


--------------------------------------------------------------------------------
/src/components/right/components/attrs-header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <div class="f-render-right-link">
 4 |       <el-link type="primary" target="_blank" :href="url"
 5 |         >点击查看 {{ title }}</el-link
 6 |       >&nbsp;
 7 |       <span style="vertical-align: middle;">属性详细解释</span>
 8 |     </div>
 9 |     <div class="f-render-right-search">
10 |       <el-input
11 |         v-model.trim="keyword"
12 |         clearable
13 |         @input="$emit('input', $event)"
14 |         placeholder="输入关键字搜索属性"
15 |       ></el-input>
16 |     </div>
17 |   </div>
18 | </template>
19 | 
20 | <script>
21 | export default {
22 |   name: "attrs-header",
23 |   props: {
24 |     url: String,
25 |     title: String
26 |   },
27 |   data() {
28 |     return {
29 |       keyword: ""
30 |     };
31 |   }
32 | };
33 | </script>
34 | 
35 | <style>
36 | .f-render-right-link {
37 |   color: #666;
38 |   font-size: 14px;
39 |   margin-left: 24px;
40 |   padding-left: 10px;
41 |   margin-bottom: 10px;
42 |   border-left: 3px solid #eee;
43 | }
44 | .f-render-right-search {
45 |   padding: 20px;
46 |   box-sizing: border-box;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 二当家的
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.m


--------------------------------------------------------------------------------
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
 1 | name: gitub pages
 2 | 
 3 | on:
 4 |   push:
 5 |     branches:
 6 |       - master
 7 | 
 8 | jobs:
 9 |   build-deploy:
10 |     runs-on: ubuntu-latest
11 | 
12 |     steps:
13 |       - uses: actions/checkout@master
14 | 
15 |       - name: install
16 |         run: yarn
17 | 
18 |       - name: build
19 |         run: yarn build
20 | 
21 |       - name: deploy
22 |         uses: peaceiris/actions-gh-pages@v2.5.0
23 |         env:
24 |           ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
25 |           PUBLISH_BRANCH: gh-pages
26 |           PUBLISH_DIR: ./dist
27 | 
28 |       - name: Sync to Gitee
29 |         uses: wearerequired/git-mirror-action@master
30 |         env:
31 |           SSH_PRIVATE_KEY: ${{ secrets.GITEE_RSA_PRIVATE_KEY }}
32 |         with:
33 |           source-repo: "git@github.com:dream2023/f-render.git"
34 |           destination-repo: "git@gitee.com:dream2023/f-render.git"
35 | 
36 |       - name: Build Gitee Pages
37 |         uses: yanglbme/gitee-pages-action@master
38 |         with:
39 |           gitee-username: dream2023
40 |           gitee-password: ${{ secrets.GITEE_PASSWORD }}
41 |           gitee-repo: dream2023/f-render
42 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/dynamic.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "dynamic",
 3 |   label: "动态组件",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-dynamic",
 6 |     attrs: {
 7 |       config: {
 8 |         columns: {
 9 |           type: "data-editor",
10 |           label: "列",
11 |           required: true,
12 |           tip: "可以是数组或者对象",
13 |           attrs: {
14 |             types: ["array", "object"]
15 |           }
16 |         },
17 |         rules: {
18 |           type: "data-editor",
19 |           label: "校检规则",
20 |           tip:
21 |             "当columns为数组时, 则rules必须为对象类型, 指定校检字段, 当columns为对象时, 则rules为数组类型",
22 |           attrs: {
23 |             types: ["array", "object"],
24 |             rows: 10
25 |           }
26 |         },
27 |         delimiter: {
28 |           type: "input",
29 |           label: "分割符"
30 |         }
31 |       },
32 |       data: {}
33 |     },
34 |     common: {
35 |       config: {
36 |         default: {
37 |           type: "data-editor",
38 |           label: "默认值",
39 |           attrs: {
40 |             types: ["array", "object"]
41 |           }
42 |         }
43 |       },
44 |       data: {
45 |         default: []
46 |       }
47 |     }
48 |   }
49 | };
50 | 


--------------------------------------------------------------------------------
/example/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import App from "./App.vue";
 3 | import FRender from "f-render";
 4 | import ElementUI from "element-ui";
 5 | import EleForm from "vue-ele-form";
 6 | import EleDynamic from "vue-ele-form-dynamic";
 7 | import "element-ui/lib/theme-chalk/index.css";
 8 | import "normalize.css";
 9 | import axios from "axios";
10 | 
11 | axios.interceptors.response.use(response => {
12 |   // 将响应结果返回
13 |   return response.data;
14 | });
15 | Vue.prototype.$axios = axios;
16 | Vue.config.productionTip = false;
17 | Vue.use(ElementUI);
18 | Vue.use(EleForm, {
19 |   upload: {
20 |     action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
21 |     responseFn(response) {
22 |       // 因为是 mock 地址, 所以, 总是返回同一张图片的URL, 正常使用的时候不会
23 |       return response.url;
24 |     }
25 |   },
26 |   "upload-file": {
27 |     responseFn(response, file) {
28 |       return {
29 |         name: file.name,
30 |         url: URL.createObjectURL(file.raw),
31 |         size: file.size
32 |       };
33 |     }
34 |   },
35 |   bmap: {
36 |     ak: "9YLHZRPvUNLhi34Oh2ojqeGSpzCf1rVG"
37 |   }
38 | });
39 | Vue.component("f-render", FRender);
40 | Vue.component("dynamic", EleDynamic);
41 | 
42 | new Vue({
43 |   render: h => h(App)
44 | }).$mount("#app");
45 | 


--------------------------------------------------------------------------------
/src/form-skeleton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="form-skeleton">
 3 |     <div v-for="item of 4" :key="item" class="form-skeleton-item">
 4 |       <div class="form-skeleton-label skeleton-animation">xxx</div>
 5 |       <div class="form-skeleton-component skeleton-animation"></div>
 6 |     </div>
 7 |   </div>
 8 | </template>
 9 | 
10 | <script>
11 | export default {
12 |   name: "form-skeleton",
13 |   data() {
14 |     return {};
15 |   },
16 |   methods: {},
17 |   mounted() {}
18 | };
19 | </script>
20 | 
21 | <style>
22 | .form-skeleton {
23 |   margin-bottom: 20px;
24 | }
25 | 
26 | .form-skeleton-item {
27 |   margin-top: 20px;
28 |   display: flex;
29 |   align-items: center;
30 |   height: 40px;
31 | }
32 | 
33 | .form-skeleton-label {
34 |   width: 50px;
35 |   padding-right: 12px;
36 |   text-align: right;
37 |   color: #606266;
38 |   line-height: 40px;
39 | }
40 | 
41 | @keyframes skeletonLoading {
42 |   0% {
43 |     background-position: 100% 50%;
44 |   }
45 |   100% {
46 |     background-position: 0 50%;
47 |   }
48 | }
49 | 
50 | .form-skeleton-component {
51 |   flex: 1;
52 |   border-radius: 5px;
53 |   background: linear-gradient(90deg, #eeeeee 25%, #cccccc 37%, #eeeeee 63%);
54 |   background-size: 400% 100%;
55 |   animation: skeletonLoading 1.4s ease infinite;
56 |   height: 40px;
57 | }
58 | </style>
59 | 


--------------------------------------------------------------------------------
/src/components/right/form-item-attrs.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <template v-if="frender.formItemList[frender.currentIndex]">
 4 |       <attrs-header
 5 |         :url="attrLink"
 6 |         :title="frender.currentFormItemType + ' 组件'"
 7 |         v-model="keyword"
 8 |       />
 9 |       <ele-form
10 |         v-model="frender.formItemList[frender.currentIndex].attrs"
11 |         :formDesc="filteredFormDesc"
12 |         :formAttrs="{ size: 'small' }"
13 |         :isShowBackBtn="false"
14 |         :isShowSubmitBtn="false"
15 |         :span="20"
16 |         labelPosition="top"
17 |       />
18 |     </template>
19 |     <div class="form-item-placeholder" v-else>
20 |       从左侧拖拽添加表单项并点选
21 |     </div>
22 |   </div>
23 | </template>
24 | 
25 | <script>
26 | import { changeFormDescLabel } from "../../utils";
27 | import searchMixin from "./components/search-mixin";
28 | import AttrsHeader from "./components/attrs-header.vue";
29 | 
30 | export default {
31 |   inject: ["frender"],
32 |   mixins: [searchMixin],
33 |   components: { AttrsHeader },
34 |   computed: {
35 |     formDesc() {
36 |       return changeFormDescLabel(
37 |         this.frender.currentCompConfig?.config?.attrs?.config || {}
38 |       );
39 |     },
40 |     // 文档链接
41 |     attrLink() {
42 |       return this.frender.currentCompConfig?.url;
43 |     }
44 |   }
45 | };
46 | </script>
47 | 


--------------------------------------------------------------------------------
/src/components/main/components/preview-dialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-dialog
 3 |     append-to-body
 4 |     :visible="visible"
 5 |     @update:visible="$emit('change', $event)"
 6 |     title="预览"
 7 |     width="90%"
 8 |     @open="isShowContent = true"
 9 |     @closed="isShowContent = false"
10 |   >
11 |     <ele-form
12 |       v-bind="frender.formBindProps"
13 |       :formDesc="frender.formDesc"
14 |       v-model="formData"
15 |       :visible="visible"
16 |       v-if="isShowContent"
17 |       @update:visible="$emit('change', $event)"
18 |       :request-fn="handleRequest"
19 |       @request-success="handleRequestSuccess"
20 |     ></ele-form>
21 |   </el-dialog>
22 | </template>
23 | 
24 | <script>
25 | export default {
26 |   inject: ["frender"],
27 |   props: {
28 |     visible: {
29 |       type: Boolean,
30 |       default: false
31 |     }
32 |   },
33 |   data() {
34 |     return {
35 |       isShowContent: false,
36 |       formData: {}
37 |     };
38 |   },
39 |   watch: {
40 |     visible(val) {
41 |       if (val) {
42 |         // 重置数据
43 |         this.formData = {};
44 |       }
45 |     }
46 |   },
47 |   methods: {
48 |     handleRequest(data) {
49 |       // eslint-disable-next-line
50 |       console.log(data);
51 |       return Promise.resolve(data);
52 |     },
53 |     handleRequestSuccess() {
54 |       this.$message.success("发送成功");
55 |     }
56 |   }
57 | };
58 | </script>
59 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/bmap.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "bmap",
 3 |   label: "地图",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-bmap",
 6 |     attrs: {
 7 |       config: {
 8 |         ak: {
 9 |           type: "input",
10 |           label: "密钥",
11 |           required: true
12 |         },
13 |         zoom: {
14 |           type: "number",
15 |           label: "缩放比",
16 |           attrs: {
17 |             min: 1
18 |           }
19 |         },
20 |         isScrollWheelZoom: {
21 |           type: "switch",
22 |           label: "滚轮缩放大小"
23 |         },
24 |         mapHeight: {
25 |           type: "number",
26 |           label: "地图高度",
27 |           attrs: {
28 |             min: 0,
29 |             step: 50
30 |           }
31 |         },
32 |         isShowNavigation: {
33 |           type: "switch",
34 |           label: "是否显示缩略控件"
35 |         },
36 |         isShowGeolocation: {
37 |           type: "switch",
38 |           label: "是否显示自动定位控件"
39 |         },
40 |         placeholder: {
41 |           type: "input",
42 |           label: "搜索占位符"
43 |         }
44 |       },
45 |       data: {
46 |         ak: "9YLHZRPvUNLhi34Oh2ojqeGSpzCf1rVG"
47 |       }
48 |     },
49 |     common: {
50 |       config: {
51 |         default: {
52 |           type: "data-editor",
53 |           label: "默认值",
54 |           attrs: {
55 |             types: ["string", "object"],
56 |             rows: 4
57 |           }
58 |         }
59 |       }
60 |     }
61 |   }
62 | };
63 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
 1 | import _ from "lodash";
 2 | const cloneDeep = require("clone");
 3 | /**
 4 |  * 对象转为数组
 5 |  * @param {object} obj
 6 |  * @example
 7 |  * objectToArr({a1: { name: "张", age: 10 }, a2: { name: "李", age: 20 }}, 'id')
 8 |  * // [{ name: "张", age: 10, id: 'a1' }, { name: "李", age: 20, id: 'a2' } ]
 9 |  */
10 | export function objectToArr(obj, keyField) {
11 |   return Object.keys(obj).reduce((acc, key) => {
12 |     acc.push(Object.assign({}, { [keyField]: key }, obj[key]));
13 |     return acc;
14 |   }, []);
15 | }
16 | 
17 | /**
18 |  * 数组转为对象
19 |  * @param {array} arr
20 |  * @example
21 |  * arrToObject([{ name: "张", age: 10, id: 'a1' }, { name: "李", age: 20, id: 'a2' } ], 'id')
22 |  * // {a1: { name: "张", age: 10 }, a2: { name: "李", age: 20 }}
23 |  */
24 | export function arrToObject(arr, key) {
25 |   return cloneDeep(arr).reduce((acc, cur) => {
26 |     acc[cur[key]] = cur;
27 |     delete cur[key];
28 | 
29 |     return acc;
30 |   }, {});
31 | }
32 | 
33 | // 改变 formDesc 的 Label
34 | export function changeFormDescLabel(formDesc = {}) {
35 |   return _.mapValues(formDesc, (obj, key) => {
36 |     // 将 label 改为 key:label，
37 |     // 例如 max: { label: "最大值" } => max: { label: "max:最大值" }
38 |     const label = `${key}: ${obj.label}`;
39 | 
40 |     // 因为 placeholder 会采用 label 做为默认值
41 |     // 所以我们需要手动赋值保持 placeholder 不变
42 |     if (!obj.attrs) {
43 |       obj.attrs = {};
44 |     }
45 |     obj.attrs.placeholder = obj.label;
46 |     return { ...obj, label };
47 |   });
48 | }
49 | 
50 | /**
51 |  * 移除双引号
52 |  * @param {string} str
53 |  * @example
54 |  * reomveQuotes({"name": "zhang"}) => {name: "zhang"}
55 |  */
56 | export function reomveQuotes(str) {
57 |   return str.replace(/"(\w+)":/g, "$1:");
58 | }
59 | 
60 | /**
61 |  * 移除无用的属性
62 |  */
63 | export function removeEmptyProps(obj = {}) {
64 |   return _.omitBy(obj, val => val === undefined || val === null || val === "");
65 | }
66 | 


--------------------------------------------------------------------------------
/example/AppHeader.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header class="app-header">
 3 |     <el-link
 4 |       :underline="false"
 5 |       href="https://github.com/dream2023/f-render"
 6 |       target="_blank"
 7 |       type="primary"
 8 |     >
 9 |       <h1 class="app-header-title">FRender 表单设计器</h1>
10 |     </el-link>
11 |     <div class="app-header-right">
12 |       <el-button
13 |         @click="$emit('change')"
14 |         icon="el-icon-view"
15 |         type="text"
16 |         style="margin-right: 20px"
17 |         >切换视图</el-button
18 |       >
19 |       <el-link
20 |         :href="item.url"
21 |         target="_blank"
22 |         type="primary"
23 |         v-for="item of links"
24 |         :key="item.title"
25 |         >{{ item.title }}</el-link
26 |       >
27 |     </div>
28 |   </header>
29 | </template>
30 | 
31 | <script>
32 | export default {
33 |   name: "AppHeader",
34 |   data() {
35 |     return {
36 |       links: [
37 |         {
38 |           url: "https://github.com/dream2023/vue-ele-form",
39 |           title: "vue-ele-form"
40 |         },
41 |         {
42 |           url: "https://www.yuque.com/chaojie-vjiel/vbwzgu",
43 |           title: "Docs"
44 |         },
45 |         {
46 |           url: "https://github.com/dream2023/f-render",
47 |           title: "GitHub"
48 |         }
49 |       ]
50 |     };
51 |   }
52 | };
53 | </script>
54 | 
55 | <style scoped>
56 | .app-header {
57 |   box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
58 |   z-index: 1;
59 |   width: 100%;
60 |   padding: 0 20px;
61 |   display: flex;
62 |   justify-content: space-between;
63 |   box-sizing: border-box;
64 | }
65 | .app-header .app-header-title {
66 |   font-size: 24px;
67 |   color: #409eff;
68 | }
69 | .app-header .app-header-right {
70 |   display: flex;
71 |   align-items: center;
72 | }
73 | .app-header .app-header-right .el-link {
74 |   margin-right: 20px;
75 | }
76 | </style>
77 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/gallery.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "gallery",
 3 |   label: "图片及视频展示",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-gallery",
 6 |     attrs: {
 7 |       config: {
 8 |         type: {
 9 |           type: "select",
10 |           label: "类型",
11 |           options: ["image", "video", "iframe"]
12 |         },
13 |         width: {
14 |           type: "number",
15 |           label: "缩略图宽度",
16 |           attrs: {
17 |             min: 0,
18 |             step: 10
19 |           }
20 |         },
21 |         height: {
22 |           type: "number",
23 |           label: "缩略图高度",
24 |           attrs: {
25 |             min: 0,
26 |             step: 10
27 |           }
28 |         },
29 |         lazy: {
30 |           type: "switch",
31 |           label: "缩略图是否懒加载"
32 |         },
33 |         thumbSuffix: {
34 |           type: "input",
35 |           label: "缩略图后缀"
36 |         },
37 |         thumbStyle: {
38 |           type: "data-editor",
39 |           label: "缩略图样式",
40 |           attrs: {
41 |             types: ["object"]
42 |           }
43 |         },
44 |         carouselAttrs: {
45 |           type: "data-editor",
46 |           label: "轮播图属性",
47 |           attrs: {
48 |             types: ["object"]
49 |           }
50 |         }
51 |       },
52 |       data: {}
53 |     },
54 |     common: {
55 |       config: {
56 |         default: {
57 |           type: "dynamic",
58 |           label: "默认值",
59 |           attrs: {
60 |             columns: {
61 |               type: "el-input",
62 |               attrs: {
63 |                 placeholder: "图片链接"
64 |               }
65 |             }
66 |           }
67 |         }
68 |       },
69 |       data: {
70 |         default: [
71 |           "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
72 |           "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
73 |         ]
74 |       }
75 |     }
76 |   }
77 | };
78 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/video-uploader.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "video-uploader",
 3 |   label: "上传视频",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-video-uploader",
 6 |     attrs: {
 7 |       config: {
 8 |         action: {
 9 |           type: "input",
10 |           label: "上传地址",
11 |           required: true
12 |         },
13 |         name: {
14 |           type: "input",
15 |           label: "上传的文件字段名",
16 |           required: true
17 |         },
18 |         fileSize: {
19 |           type: "input",
20 |           label: "文件大小限制(MB)",
21 |           attrs: {
22 |             type: "number",
23 |             min: 0
24 |           }
25 |         },
26 |         width: {
27 |           type: "number",
28 |           label: "显示宽度",
29 |           attrs: {
30 |             step: 10,
31 |             min: 0
32 |           }
33 |         },
34 |         height: {
35 |           type: "number",
36 |           label: "显示高度(默认auto)",
37 |           attrs: {
38 |             step: 10,
39 |             min: 0
40 |           }
41 |         },
42 |         fileType: {
43 |           type: "data-editor",
44 |           label: "文件类型",
45 |           attrs: {
46 |             types: ["array"],
47 |             rows: 4
48 |           }
49 |         },
50 |         isShowTip: {
51 |           type: "switch",
52 |           label: "是否显示提示"
53 |         },
54 |         withCredentials: {
55 |           type: "switch",
56 |           label: "支持发送 cookie 凭证信息"
57 |         },
58 |         data: {
59 |           type: "data-editor",
60 |           label: "上传时附带的额外参数",
61 |           attrs: {
62 |             types: ["object"]
63 |           }
64 |         },
65 |         headers: {
66 |           type: "data-editor",
67 |           label: "设置上传的请求头部",
68 |           attrs: {
69 |             types: ["object"]
70 |           }
71 |         }
72 |       },
73 |       data: {
74 |         action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
75 |       }
76 |     }
77 |   }
78 | };
79 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/quill-editor.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "quill-editor",
 3 |   label: "富文本编辑器",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-quill-editor",
 6 |     attrs: {
 7 |       config: {
 8 |         action: {
 9 |           type: "input",
10 |           label: "上传地址",
11 |           required: true
12 |         },
13 |         editorOptions: {
14 |           type: "data-editor",
15 |           label: "编辑器设置",
16 |           tip: "请参考: https://github.com/davidroyer/vue2-editor",
17 |           attrs: {
18 |             types: ["object"]
19 |           }
20 |         },
21 |         placeholder: {
22 |           type: "input",
23 |           label: "占位符"
24 |         },
25 |         fileSize: {
26 |           type: "input",
27 |           label: "文件大小限制(MB)",
28 |           attrs: {
29 |             type: "number",
30 |             min: 0
31 |           }
32 |         },
33 |         name: {
34 |           type: "input",
35 |           label: "上传的文件字段名",
36 |           required: true
37 |         },
38 |         withCredentials: {
39 |           type: "switch",
40 |           label: "支持发送 cookie 凭证信息"
41 |         },
42 |         data: {
43 |           type: "data-editor",
44 |           label: "上传时附带的额外参数",
45 |           attrs: {
46 |             types: ["object"]
47 |           }
48 |         },
49 |         headers: {
50 |           type: "data-editor",
51 |           label: "设置上传的请求头部",
52 |           attrs: {
53 |             types: ["object"]
54 |           }
55 |         },
56 |         editorToolbar: {
57 |           type: "data-editor",
58 |           label: "自定义toolbar",
59 |           attrs: {
60 |             types: ["array"]
61 |           }
62 |         }
63 |       },
64 |       data: {
65 |         action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
66 |       }
67 |     },
68 |     common: {
69 |       config: {
70 |         default: {
71 |           type: "textarea",
72 |           label: "默认值"
73 |         }
74 |       }
75 |     }
76 |   }
77 | };
78 | 


--------------------------------------------------------------------------------
/src/components/right/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="f-render-right">
 3 |     <el-tabs class="f-render-header" :stretch="true" v-model="activeTab">
 4 |       <el-tab-pane
 5 |         v-for="tab of frender.rightTabs"
 6 |         :key="tab.name"
 7 |         :label="tab.label"
 8 |         :name="tab.name"
 9 |       ></el-tab-pane>
10 |     </el-tabs>
11 |     <perfect-scrollbar ref="scroll" class="f-render-scrollarea">
12 |       <component
13 |         v-show="activeTab === tab.name"
14 |         :is="tab.name"
15 |         class="f-render-right-content"
16 |         v-for="tab of frender.rightTabs"
17 |         :key="tab.name"
18 |       />
19 |     </perfect-scrollbar>
20 |   </div>
21 | </template>
22 | 
23 | <script>
24 | import FormProps from "./form-props.vue";
25 | import FormItemAttrs from "./form-item-attrs.vue";
26 | import FormItemCommon from "./form-item-common.vue";
27 | 
28 | export default {
29 |   inject: ["frender"],
30 |   components: {
31 |     FormProps,
32 |     FormItemAttrs,
33 |     FormItemCommon
34 |   },
35 |   data() {
36 |     return {
37 |       activeTab: ""
38 |     };
39 |   },
40 |   watch: {
41 |     // 切换Tab滚动到顶部
42 |     activeTab() {
43 |       this.$refs.scroll.$el.scrollTop = 0;
44 |     }
45 |   },
46 |   mounted() {
47 |     this.activeTab = this.frender.rightTabs[0].name;
48 |   }
49 | };
50 | </script>
51 | 
52 | <style lang="css">
53 | .f-render-right {
54 |   width: 310px;
55 |   height: 100%;
56 | }
57 | .f-render-right .form-item-placeholder {
58 |   height: 300px;
59 |   line-height: 300px;
60 |   color: #909399;
61 |   text-align: center;
62 | }
63 | .f-render-right .el-tabs__header {
64 |   padding-top: 20px;
65 | }
66 | .f-render-right .el-tabs__nav-wrap {
67 |   padding: 0 15px;
68 | }
69 | .f-render-right .el-tabs__item {
70 |   padding: 0 10px;
71 | }
72 | .f-render-right .el-tabs__nav-wrap::after {
73 |   height: 0;
74 | }
75 | .f-render-right .el-tabs__active-bar {
76 |   height: 1px !important;
77 | }
78 | .f-render-right .f-render-right-content {
79 |   padding: 20px 0;
80 | }
81 | </style>
82 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/upload-file.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   type: "upload-file",
 3 |   label: "文件上传",
 4 |   config: {
 5 |     url: "https://github.com/dream2023/vue-ele-form-upload-file",
 6 |     attrs: {
 7 |       config: {
 8 |         action: {
 9 |           type: "input",
10 |           label: "上传地址",
11 |           required: true
12 |         },
13 |         name: {
14 |           type: "input",
15 |           label: "上传的文件字段名",
16 |           required: true
17 |         },
18 |         placeholder: {
19 |           type: "input",
20 |           label: "上传按钮文本"
21 |         },
22 |         fileSize: {
23 |           type: "input",
24 |           label: "文件大小限制(MB)",
25 |           attrs: {
26 |             type: "number",
27 |             min: 0
28 |           }
29 |         },
30 |         fileType: {
31 |           type: "data-editor",
32 |           label: '文件类型, 例如["png", "jpg", "jpeg"]',
33 |           attrs: {
34 |             types: ["array"],
35 |             rows: 4
36 |           }
37 |         },
38 |         multiple: {
39 |           type: "switch",
40 |           label: "是否支持多选文件"
41 |         },
42 |         limit: {
43 |           type: "input",
44 |           label: "文件个数显示",
45 |           vif: data => data.multiple,
46 |           attrs: {
47 |             type: "number",
48 |             min: 0
49 |           }
50 |         },
51 |         isCanDownload: {
52 |           type: "switch",
53 |           label: "是否显示下载"
54 |         },
55 |         isCanDelete: {
56 |           type: "switch",
57 |           label: "是否可删除"
58 |         },
59 |         isCanUploadSame: {
60 |           type: "switch",
61 |           label: "是否可上传相同文件"
62 |         },
63 |         isShowTip: {
64 |           type: "switch",
65 |           label: "是否显示提示"
66 |         },
67 |         withCredentials: {
68 |           type: "switch",
69 |           label: "支持发送 cookie 凭证信息"
70 |         },
71 |         data: {
72 |           type: "data-editor",
73 |           label: "上传时附带的额外参数",
74 |           attrs: {
75 |             types: ["object"]
76 |           }
77 |         },
78 |         headers: {
79 |           type: "data-editor",
80 |           label: "设置上传的请求头部",
81 |           attrs: {
82 |             types: ["object"]
83 |           }
84 |         }
85 |       },
86 |       data: {
87 |         action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
88 |       }
89 |     }
90 |   }
91 | };
92 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "f-render",
 3 |   "version": "4.12.3",
 4 |   "private": false,
 5 |   "license": "MIT",
 6 |   "description": "f-render | 基于 ElementUI 的表单设计器",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build",
10 |     "toc": "doctoc README.md",
11 |     "build:lib": "vue-cli-service build --target lib --name f-render ./src/index.js",
12 |     "lint": "vue-cli-service lint --mode=production",
13 |     "release": "standard-version",
14 |     "pub": " npm run release && npm publish && git push --follow-tags origin master"
15 |   },
16 |   "main": "./dist/f-render.umd.min.js",
17 |   "dependencies": {
18 |     "clipboard-copy": "^3.1.0",
19 |     "clone": "^2.1.2",
20 |     "fuzzy": "^0.1.3",
21 |     "indent-string": "^4.0.0",
22 |     "lodash": "^4.17.20",
23 |     "prismjs": "^1.21.0",
24 |     "serialize-javascript": "^4.0.0",
25 |     "vue-ele-form-data-editor": "^0.1.6",
26 |     "vue-ele-form-dynamic": "^0.4.3",
27 |     "vue-multipane": "^0.9.5",
28 |     "vue-prism-editor": "^1.2.2",
29 |     "vue2-perfect-scrollbar": "^1.5.0",
30 |     "vuedraggable": "^2.24.0"
31 |   },
32 |   "devDependencies": {
33 |     "@vue/cli-plugin-babel": "~4.5.0",
34 |     "@vue/cli-plugin-eslint": "~4.5.0",
35 |     "@vue/cli-service": "~4.5.0",
36 |     "@vue/eslint-config-prettier": "^6.0.0",
37 |     "axios": "^0.20.0",
38 |     "babel-eslint": "^10.1.0",
39 |     "babel-plugin-lodash": "^3.3.4",
40 |     "core-js": "^3.6.5",
41 |     "doctoc": "^1.4.0",
42 |     "element-ui": "^2.13.2",
43 |     "eslint": "^6.7.2",
44 |     "eslint-plugin-prettier": "^3.1.3",
45 |     "eslint-plugin-vue": "^6.2.2",
46 |     "lint-staged": "^9.5.0",
47 |     "lodash-webpack-plugin": "^0.11.5",
48 |     "normalize.css": "^8.0.1",
49 |     "prettier": "^1.19.1",
50 |     "standard-version": "^9.0.0",
51 |     "vue": "^2.6.11",
52 |     "vue-ele-form": "^0.8.56",
53 |     "vue-template-compiler": "^2.6.11"
54 |   },
55 |   "repository": {
56 |     "type": "git",
57 |     "url": "https://github.com/dream2023/f-render"
58 |   },
59 |   "keywords": [
60 |     "vue-ele-form",
61 |     "f-render",
62 |     "form-schema",
63 |     "vue-form",
64 |     "form-designer",
65 |     "form-design",
66 |     "element-ui",
67 |     "form-generator",
68 |     "for-generate",
69 |     "vue-form-generator",
70 |     "form schema"
71 |   ],
72 |   "gitHooks": {
73 |     "pre-commit": "lint-staged"
74 |   },
75 |   "lint-staged": {
76 |     "*.{js,jsx,vue}": [
77 |       "vue-cli-service lint --mode=production",
78 |       "git add"
79 |     ]
80 |   }
81 | }
82 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/tree-select.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   type: "tree-select",
  3 |   label: "树形下拉选择器",
  4 |   config: {
  5 |     url: "https://github.com/dream2023/vue-ele-form-tree-select",
  6 |     attrs: {
  7 |       config: {
  8 |         placeholder: {
  9 |           type: "input",
 10 |           label: "占位符"
 11 |         },
 12 |         appendToBody: {
 13 |           type: "switch",
 14 |           label: "弹窗插入body"
 15 |         },
 16 |         multiple: {
 17 |           type: "switch",
 18 |           label: "是否开启多选模式"
 19 |         },
 20 |         searchable: {
 21 |           type: "switch",
 22 |           label: "是否开启搜索功能"
 23 |         },
 24 |         async: {
 25 |           type: "switch",
 26 |           label: "是否开启异步搜索"
 27 |         },
 28 |         autoFocus: {
 29 |           type: "switch",
 30 |           label: "是否自动聚焦"
 31 |         },
 32 |         clearable: {
 33 |           type: "switch",
 34 |           label: "是否显示清除图标"
 35 |         },
 36 |         limit: {
 37 |           type: "number",
 38 |           label: "多选数量显示",
 39 |           vif: data => data.multiple,
 40 |           attrs: {
 41 |             min: 1
 42 |           }
 43 |         },
 44 |         maxHeight: {
 45 |           type: "number",
 46 |           label: "弹出菜单高度",
 47 |           attrs: {
 48 |             min: 0,
 49 |             step: 10
 50 |           }
 51 |         },
 52 |         alwaysOpen: {
 53 |           type: "switch",
 54 |           label: "一直打开选项菜单"
 55 |         },
 56 |         flattenSearchResults: {
 57 |           type: "switch",
 58 |           label: "是否展平搜索结果",
 59 |           vif: data => data.async
 60 |         },
 61 |         autoLoadRootOptions: {
 62 |           type: "switch",
 63 |           label: "是否自定加载根节点选项"
 64 |         }
 65 |       }
 66 |     },
 67 |     common: {
 68 |       config: {
 69 |         default: {
 70 |           type: "tree-select",
 71 |           label: "默认值",
 72 |           prop: data => data.prop,
 73 |           optionsLinkageFields: data => data.optionsLinkageFields,
 74 |           options: data => data.options
 75 |         }
 76 |       },
 77 |       data: {
 78 |         isOptions: true,
 79 |         options: [
 80 |           {
 81 |             id: "a",
 82 |             label: "a",
 83 |             children: [
 84 |               {
 85 |                 id: "aa",
 86 |                 label: "aa"
 87 |               },
 88 |               {
 89 |                 id: "ab",
 90 |                 label: "ab"
 91 |               }
 92 |             ]
 93 |           },
 94 |           {
 95 |             id: "b",
 96 |             label: "b"
 97 |           },
 98 |           {
 99 |             id: "c",
100 |             label: "c"
101 |           }
102 |         ]
103 |       }
104 |     }
105 |   }
106 | };
107 | 


--------------------------------------------------------------------------------
/src/components/left/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="f-render-left">
  3 |     <!-- 搜索 -->
  4 |     <div class="f-render-header f-render-comp-searcher">
  5 |       <el-input
  6 |         clearable
  7 |         placeholder="请输入关键字查找组件"
  8 |         v-model.trim="keyword"
  9 |       ></el-input>
 10 |     </div>
 11 | 
 12 |     <!-- 组件列表 -->
 13 |     <perfect-scrollbar class="f-render-scrollarea">
 14 |       <vue-draggable
 15 |         :clone="handleAddFormItem"
 16 |         :group="{ name: 'form', pull: 'clone', put: false }"
 17 |         :list="filteredComps"
 18 |         class="f-render-comps"
 19 |         :sort="false"
 20 |         tag="ul"
 21 |       >
 22 |         <li
 23 |           v-for="item of filteredComps"
 24 |           :key="item.type"
 25 |           @click="handleDoubleClick(item)"
 26 |           class="f-render-comp"
 27 |         >
 28 |           <div class="f-render-comp-title">{{ item.type }}</div>
 29 |           <div>{{ item.label }}</div>
 30 |         </li>
 31 |       </vue-draggable>
 32 |     </perfect-scrollbar>
 33 |   </div>
 34 | </template>
 35 | 
 36 | <script>
 37 | const fuzzy = require("fuzzy");
 38 | 
 39 | export default {
 40 |   inject: ["frender"],
 41 |   computed: {
 42 |     // 支持模糊搜索
 43 |     filteredComps() {
 44 |       const results = fuzzy.filter(this.keyword, this.frender.sortedComps, {
 45 |         extract: comp => comp.label + comp.type
 46 |       });
 47 |       return results.map(el => el.original);
 48 |     }
 49 |   },
 50 |   data() {
 51 |     return {
 52 |       keyword: ""
 53 |     };
 54 |   },
 55 |   methods: {
 56 |     getFormItemByConfig({ type, label }) {
 57 |       const formItemData = this.frender.getFormItemByType(type);
 58 |       return {
 59 |         label,
 60 |         field: "key_" + Date.now(),
 61 |         ...formItemData
 62 |       };
 63 |     },
 64 |     // 双击添加表单
 65 |     handleDoubleClick(config) {
 66 |       const formItemData = this.getFormItemByConfig(config);
 67 |       this.frender.formItemList = [...this.frender.formItemList, formItemData];
 68 |     },
 69 |     // 拖拽后新增表单项
 70 |     handleAddFormItem(config) {
 71 |       return this.getFormItemByConfig(config);
 72 |     }
 73 |   }
 74 | };
 75 | </script>
 76 | 
 77 | <style lang="css">
 78 | /* 搜索框 */
 79 | .f-render-comp-searcher {
 80 |   padding: 0 10px;
 81 | }
 82 | 
 83 | /* 组件列表 */
 84 | .f-render-comps {
 85 |   padding: 0;
 86 |   margin-top: 10px;
 87 | }
 88 | 
 89 | /* 单个组件 */
 90 | .f-render-comps .f-render-comp {
 91 |   width: 115px;
 92 |   line-height: 1.5em;
 93 |   color: #606266;
 94 |   border: 1px solid #ebeef5;
 95 |   overflow: hidden;
 96 |   cursor: move;
 97 |   white-space: nowrap;
 98 |   display: inline-block;
 99 |   text-overflow: ellipsis;
100 |   border-radius: 3px;
101 |   padding: 6px 8px;
102 |   box-sizing: border-box;
103 |   margin: 5px;
104 |   font-size: 12px;
105 | }
106 | 
107 | /* 组件标题 */
108 | .f-render-comps .f-render-comp-title {
109 |   font-weight: bold;
110 |   color: #222;
111 | }
112 | </style>
113 | 


--------------------------------------------------------------------------------
/src/components/main/components/code-dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |     :visible="visible"
  4 |     append-to-body
  5 |     title="代码"
  6 |     @update:visible="$emit('change', $event)"
  7 |   >
  8 |     <el-radio-group v-model="showType">
  9 |       <el-radio label="f-render">f-render方式</el-radio>
 10 |       <el-radio label="vue-ele-form">vue-ele-form方式</el-radio>
 11 |     </el-radio-group>
 12 |     <prism-editor
 13 |       class="f-render-code"
 14 |       :value="code"
 15 |       :highlight="highlighter"
 16 |       line-numbers
 17 |       readonly
 18 |     ></prism-editor>
 19 |     <div style="text-align: center;margin-top: 20px">
 20 |       <el-button @click="handleCopyCode" type="primary">复制代码</el-button>
 21 |       <!-- 下载 TODO 检测移入事件 -->
 22 |       <el-button type="primary"
 23 |         ><el-link
 24 |           :href="fileURL"
 25 |           style="color: white;"
 26 |           :underline="false"
 27 |           :download="`${Date.now()}.vue`"
 28 |           >下载文件</el-link
 29 |         ></el-button
 30 |       >
 31 |       <el-button @click="$emit('change', false)">关闭弹窗</el-button>
 32 |     </div>
 33 |   </el-dialog>
 34 | </template>
 35 | 
 36 | <script>
 37 | import copy from "clipboard-copy";
 38 | 
 39 | import { PrismEditor } from "vue-prism-editor";
 40 | import { highlight, languages } from "prismjs/components/prism-core";
 41 | 
 42 | import FRenderTpl from "./tpl/f-render";
 43 | import EleFormTpl from "./tpl/vue-ele-form";
 44 | 
 45 | import _ from "lodash";
 46 | const indentString = require("indent-string");
 47 | import { reomveQuotes } from "../../../utils";
 48 | 
 49 | export default {
 50 |   inject: ["frender"],
 51 |   props: {
 52 |     visible: {
 53 |       type: Boolean,
 54 |       default: false
 55 |     }
 56 |   },
 57 |   components: {
 58 |     PrismEditor
 59 |   },
 60 |   data() {
 61 |     return {
 62 |       code: "",
 63 |       fileURL: "",
 64 |       showType: "f-render"
 65 |     };
 66 |   },
 67 |   watch: {
 68 |     // 当 showType 变化
 69 |     showType() {
 70 |       this.setCode();
 71 |     },
 72 |     // 当 visible 变化时
 73 |     visible(val) {
 74 |       if (val) {
 75 |         this.setCode();
 76 |       }
 77 |     },
 78 |     // 检测 code 当代码变化时，重新生成 URL
 79 |     code() {
 80 |       // 防抖，最后一次起作用
 81 |       if (!this.codeToURL) {
 82 |         this.codeToURL = _.debounce(() => {
 83 |           // 将代码转为 URL
 84 |           const blob = new Blob([this.code]);
 85 |           this.fileURL = URL.createObjectURL(blob);
 86 |         }, 200);
 87 |       }
 88 | 
 89 |       this.codeToURL();
 90 |     }
 91 |   },
 92 |   methods: {
 93 |     // 设置代码
 94 |     setCode() {
 95 |       const tpl = this.showType === "f-render" ? FRenderTpl : EleFormTpl;
 96 |       this.code = tpl(
 97 |         indentString(reomveQuotes(this.frender.getFormConfigStr()), 6).trim()
 98 |       );
 99 |     },
100 |     // 高亮代码
101 |     highlighter(code) {
102 |       return highlight(code, languages.js);
103 |     },
104 |     // 复制代码
105 |     handleCopyCode() {
106 |       copy(this.code);
107 |       this.$message.success("复制成功!");
108 |     }
109 |   }
110 | };
111 | </script>
112 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/image-uploader.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   type: "image-uploader",
  3 |   label: "上传图片",
  4 |   config: {
  5 |     url: "https://github.com/dream2023/vue-ele-form-image-uploader",
  6 |     attrs: {
  7 |       config: {
  8 |         action: {
  9 |           type: "input",
 10 |           label: "上传地址",
 11 |           required: true
 12 |         },
 13 |         name: {
 14 |           type: "input",
 15 |           label: "上传的文件字段名",
 16 |           required: true
 17 |         },
 18 |         corp: {
 19 |           type: "switch",
 20 |           label: "是否剪裁"
 21 |         },
 22 |         cropHeight: {
 23 |           type: "number",
 24 |           label: "裁剪高度",
 25 |           vif: data => data.corp,
 26 |           attrs: {
 27 |             min: 0
 28 |           }
 29 |         },
 30 |         cropWidth: {
 31 |           type: "number",
 32 |           label: "裁剪宽度",
 33 |           vif: data => data.corp,
 34 |           attrs: {
 35 |             min: 0
 36 |           }
 37 |         },
 38 |         multiple: {
 39 |           type: "switch",
 40 |           label: "是否支持多选文件"
 41 |         },
 42 |         limit: {
 43 |           type: "input",
 44 |           label: "文件个数显示",
 45 |           vif: data => data.multiple,
 46 |           attrs: {
 47 |             min: 0,
 48 |             type: "number"
 49 |           }
 50 |         },
 51 |         size: {
 52 |           type: "number",
 53 |           label: "图片显示大小",
 54 |           attrs: {
 55 |             min: 0,
 56 |             step: 10
 57 |           }
 58 |         },
 59 |         fileSize: {
 60 |           type: "number",
 61 |           label: "文件大小限制(MB)",
 62 |           attrs: {
 63 |             min: 0
 64 |           }
 65 |         },
 66 |         lazy: {
 67 |           type: "switch",
 68 |           label: "图片懒加载"
 69 |         },
 70 |         drag: {
 71 |           type: "switch",
 72 |           label: "是否启用拖拽上传"
 73 |         },
 74 |         withCredentials: {
 75 |           type: "switch",
 76 |           label: "支持发送 cookie 凭证信息"
 77 |         },
 78 |         isShowTip: {
 79 |           type: "switch",
 80 |           label: "是否显示提示"
 81 |         },
 82 |         title: {
 83 |           type: "input",
 84 |           label: "弹窗标题"
 85 |         },
 86 |         thumbSuffix: {
 87 |           type: "input",
 88 |           label: "略图后缀, 例如七牛云缩略图样式 (?imageView2/1/w/20/h/20)"
 89 |         },
 90 |         fileType: {
 91 |           type: "data-editor",
 92 |           label: '文件类型, 例如["png", "jpg", "jpeg"]',
 93 |           attrs: {
 94 |             types: ["array"]
 95 |           }
 96 |         },
 97 |         data: {
 98 |           type: "data-editor",
 99 |           label: "上传时附带的额外参数",
100 |           attrs: {
101 |             types: ["array", "object"]
102 |           }
103 |         },
104 |         headers: {
105 |           type: "data-editor",
106 |           label: "设置上传的请求头部",
107 |           attrs: {
108 |             types: ["object"]
109 |           }
110 |         }
111 |       },
112 |       data: {
113 |         action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
114 |       }
115 |     }
116 |   }
117 | };
118 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/data-editor.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   type: "textarea",
  3 |   label: "多行输入框",
  4 |   sort: 2,
  5 |   config: {
  6 |     url: "https://element.eleme.cn/#/zh-CN/component/input#wen-ben-yu",
  7 |     attrs: {
  8 |       config: {
  9 |         autoSave: {
 10 |           type: "switch",
 11 |           label: "是否自动保存"
 12 |         },
 13 |         types: {
 14 |           type: "dynamic",
 15 |           label: "数据类型"
 16 |         },
 17 |         placeholder: {
 18 |           type: "input",
 19 |           label: "输入框占位文本",
 20 |           attrs: {
 21 |             clearable: true
 22 |           }
 23 |         },
 24 |         rows: {
 25 |           type: "number",
 26 |           label: "输入框行",
 27 |           attrs: {
 28 |             min: 1
 29 |           }
 30 |         },
 31 |         autosizeType: {
 32 |           type: "radio",
 33 |           label: "自适应内容高度值类型",
 34 |           default: "switch",
 35 |           options: [
 36 |             { text: "自适应", value: "switch" },
 37 |             { text: "最大最小值", value: "data-editor" }
 38 |           ]
 39 |         },
 40 |         autosize: {
 41 |           type: data => data.autosizeType,
 42 |           default: data => {
 43 |             if (data.autosizeType === "switch") {
 44 |               return false;
 45 |             } else {
 46 |               return { minRows: 2, maxRows: 6 };
 47 |             }
 48 |           },
 49 |           label: "自适应内容高度配置",
 50 |           attrs(data) {
 51 |             if (data.autosizeType === "data-editor") {
 52 |               return {
 53 |                 types: ["object"],
 54 |                 rows: 4
 55 |               };
 56 |             }
 57 |           },
 58 |           rules: [
 59 |             {
 60 |               trigger: "blur",
 61 |               validator: function(rule, value, callback) {
 62 |                 if (typeof value === "object") {
 63 |                   if (!value.minRows || !value.maxRows) {
 64 |                     callback("对象必须包含 minRows 和 maxRows");
 65 |                   }
 66 |                 } else if (typeof value !== "boolean") {
 67 |                   callback("数据类型不正确");
 68 |                 }
 69 |               }
 70 |             }
 71 |           ]
 72 |         },
 73 |         resize: {
 74 |           type: "select",
 75 |           label: "控制是否能被用户缩放",
 76 |           options: ["both", "horizontal", "vertical"],
 77 |           attrs: {
 78 |             clearable: true
 79 |           }
 80 |         },
 81 |         showWordLimit: {
 82 |           type: "switch",
 83 |           label: "是否显示输入字数统计",
 84 |           vif: data => data.minlength || data.maxlength
 85 |         },
 86 |         clearable: {
 87 |           type: "switch",
 88 |           label: "是否可清空"
 89 |         },
 90 |         autofocus: {
 91 |           type: "switch",
 92 |           label: "原生属性，自动获取焦点"
 93 |         },
 94 |         tabindex: {
 95 |           type: "input",
 96 |           label: "输入框的tabindex",
 97 |           attrs: {
 98 |             clearable: true
 99 |           }
100 |         },
101 |         validateEvent: {
102 |           type: "switch",
103 |           label: "输入时是否触发表单的校验"
104 |         }
105 |       },
106 |       data: {}
107 |     }
108 |   }
109 | };
110 | 


--------------------------------------------------------------------------------
/src/components/right/form-item-common.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div>
  3 |     <template v-if="frender.formItemList[frender.currentIndex]">
  4 |       <attrs-header
  5 |         url="https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf"
  6 |         title="表单项配置"
  7 |         v-model="keyword"
  8 |       />
  9 |       <ele-form
 10 |         v-model="frender.formItemList[frender.currentIndex]"
 11 |         :formDesc="filteredFormDesc"
 12 |         :formAttrs="{ size: 'small' }"
 13 |         :isShowBackBtn="false"
 14 |         :isShowSubmitBtn="false"
 15 |         :rules="rules"
 16 |         :options-fn="
 17 |           frender.formBindProps['options-fn'] ||
 18 |             frender.formBindProps['optionsFn']
 19 |         "
 20 |         :span="20"
 21 |         labelPosition="top"
 22 |       >
 23 |         <template v-slot:rules="{ desc, formData, field, type }">
 24 |           <div style="margin-bottom: 20px">
 25 |             <el-button @click="isShowRuleDialog = true" type="danger"
 26 |               >新增校检规则</el-button
 27 |             >
 28 |           </div>
 29 |           <component
 30 |             :desc="desc"
 31 |             :is="type"
 32 |             :field="field"
 33 |             v-model="formData[field]"
 34 |           />
 35 |           <form-item-rules :visible.sync="isShowRuleDialog" />
 36 |         </template>
 37 |       </ele-form>
 38 |     </template>
 39 |     <div class="form-item-placeholder" v-else>
 40 |       从左侧拖拽添加表单项并点选
 41 |     </div>
 42 |   </div>
 43 | </template>
 44 | 
 45 | <script>
 46 | import _ from "lodash";
 47 | import { changeFormDescLabel } from "../../utils";
 48 | import searchMixin from "./components/search-mixin";
 49 | import AttrsHeader from "./components/attrs-header.vue";
 50 | import FormItemRules from "./components/form-item-rules.vue";
 51 | 
 52 | export default {
 53 |   inject: ["frender"],
 54 |   mixins: [searchMixin],
 55 |   components: {
 56 |     AttrsHeader,
 57 |     FormItemRules
 58 |   },
 59 |   computed: {
 60 |     // 自定义的配置
 61 |     customConfig() {
 62 |       const currentCompConfig = this.frender.currentCompConfig;
 63 |       return currentCompConfig?.config?.common?.config || {};
 64 |     },
 65 |     // 字段出现的次数
 66 |     fieldCountObj() {
 67 |       return _.countBy(this.frender.formItemList, o => o.field);
 68 |     }
 69 |   },
 70 |   watch: {
 71 |     // 检测当前表单项类型变化
 72 |     "frender.currentFormItemType": {
 73 |       handler(currentFormItemType) {
 74 |         // 如果并没有选择表单项类型，则为空
 75 |         if (!currentFormItemType) {
 76 |           this.formDesc = {};
 77 |           return;
 78 |         }
 79 | 
 80 |         // 当前组件信息
 81 |         this.formDesc = changeFormDescLabel({
 82 |           ...this.frender.formItemCommon.config,
 83 |           ...this.customConfig
 84 |         });
 85 |       },
 86 |       immediate: true
 87 |     }
 88 |   },
 89 |   data() {
 90 |     return {
 91 |       formDesc: {},
 92 |       rules: {
 93 |         field: [
 94 |           {
 95 |             required: true,
 96 |             message: "字段必填"
 97 |           },
 98 |           {
 99 |             type: "string",
100 |             validator: (rule, value, callback) => {
101 |               // 如果字段出现次数超过 1 次，则表示字段重复
102 |               if (this.fieldCountObj[value] > 1) {
103 |                 callback("字段名重复");
104 |               } else {
105 |                 callback();
106 |               }
107 |             }
108 |           }
109 |         ]
110 |       },
111 |       isShowRuleDialog: false
112 |     };
113 |   }
114 | };
115 | </script>
116 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/markdown-editor.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   type: "markdown-editor",
  3 |   label: "markdown编辑器",
  4 |   config: {
  5 |     url: "https://github.com/dream2023/vue-ele-form-markdown-editor",
  6 |     attrs: {
  7 |       config: {
  8 |         fontSize: {
  9 |           type: "input",
 10 |           label: "编辑区域文字大小"
 11 |         },
 12 |         scrollStyle: {
 13 |           type: "switch",
 14 |           label: "开启滚动条样式(暂时仅支持chrome)"
 15 |         },
 16 |         boxShadow: {
 17 |           type: "switch",
 18 |           label: "开启边框阴影"
 19 |         },
 20 |         boxShadowStyle: {
 21 |           type: "input",
 22 |           label: "边框阴影样式"
 23 |         },
 24 |         transition: {
 25 |           type: "switch",
 26 |           label: "是否开启过渡动画"
 27 |         },
 28 |         toolbarsBackground: {
 29 |           type: "color",
 30 |           label: "工具栏背景颜色"
 31 |         },
 32 |         previewBackground: {
 33 |           type: "color",
 34 |           label: "预览框背景颜色"
 35 |         },
 36 |         subfield: {
 37 |           type: "switch",
 38 |           label: "true： 双栏(编辑预览同屏)， false： 单栏(编辑预览分屏)"
 39 |         },
 40 |         defaultOpen: {
 41 |           type: "radio",
 42 |           label: "默认展示区域",
 43 |           options: ["edit", "preview"]
 44 |         },
 45 |         placeholder: {
 46 |           type: "input",
 47 |           label: "输入框为空时默认提示文本"
 48 |         },
 49 |         editable: {
 50 |           type: "switch",
 51 |           label: "是否允许编辑"
 52 |         },
 53 |         toolbarsFlag: {
 54 |           type: "switch",
 55 |           label: "工具栏是否显示"
 56 |         },
 57 |         navigation: {
 58 |           type: "switch",
 59 |           label: "默认展示目录"
 60 |         },
 61 |         shortCut: {
 62 |           type: "switch",
 63 |           label: "是否启用快捷键"
 64 |         },
 65 |         autofocus: {
 66 |           type: "switch",
 67 |           label: "自动聚焦到文本框"
 68 |         },
 69 |         ishljs: {
 70 |           type: "switch",
 71 |           label: "代码高亮"
 72 |         },
 73 |         toolbars: {
 74 |           type: "data-editor",
 75 |           label: "工具栏",
 76 |           attrs: {
 77 |             types: ["object"],
 78 |             rows: 10
 79 |           }
 80 |         },
 81 |         action: {
 82 |           type: "input",
 83 |           label: "上传地址",
 84 |           required: true
 85 |         },
 86 |         fileSize: {
 87 |           type: "input",
 88 |           label: "文件大小限制(MB)",
 89 |           attrs: {
 90 |             type: "number",
 91 |             min: 0
 92 |           }
 93 |         },
 94 |         name: {
 95 |           type: "input",
 96 |           label: "上传的文件字段名",
 97 |           required: true
 98 |         },
 99 |         withCredentials: {
100 |           type: "switch",
101 |           label: "支持发送 cookie 凭证信息"
102 |         },
103 |         data: {
104 |           type: "data-editor",
105 |           label: "上传时附带的额外参数",
106 |           attrs: {
107 |             types: ["object"]
108 |           }
109 |         },
110 |         headers: {
111 |           type: "data-editor",
112 |           label: "设置上传的请求头部",
113 |           attrs: {
114 |             types: ["object"]
115 |           }
116 |         }
117 |       },
118 |       data: {
119 |         action: "https://www.mocky.io/v2/5cc8019d300000980a055e76"
120 |       }
121 |     },
122 |     common: {
123 |       config: {
124 |         default: {
125 |           type: "textarea",
126 |           label: "默认值",
127 |           default: ""
128 |         }
129 |       }
130 |     }
131 |   }
132 | };
133 | 


--------------------------------------------------------------------------------
/src/fixtures/form-item-common.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   config: {
  3 |     field: {
  4 |       type: "input",
  5 |       label: "字段名",
  6 |       tip: "字段名不可重复",
  7 |       rules: {
  8 |         type: "string"
  9 |       }
 10 |     },
 11 |     label: {
 12 |       type: "input",
 13 |       label: "标签"
 14 |     },
 15 |     layout: {
 16 |       type: "slider",
 17 |       label: "宽度",
 18 |       attrs: {
 19 |         min: 1,
 20 |         max: 24,
 21 |         formatTooltip(val) {
 22 |           return `${val} / 24`;
 23 |         }
 24 |       }
 25 |     },
 26 |     default: {
 27 |       type: "input",
 28 |       label: "默认值"
 29 |     },
 30 |     required: {
 31 |       type: "yesno",
 32 |       label: "校检",
 33 |       title: "是否必填"
 34 |     },
 35 |     rules: {
 36 |       type: "data-editor",
 37 |       label: "校检规则",
 38 |       title: "新增校检规则",
 39 |       default: [],
 40 |       attrs: {
 41 |         types: ["array", "object"],
 42 |         rows: 10
 43 |       },
 44 |       tip:
 45 |         '校检规则文档, 请<a target="_blank" href="https://www.yuque.com/chaojie-vjiel/vbwzgu/qzzkpd" class="el-link el-link--primary">点击查看</a>'
 46 |     },
 47 |     options: {
 48 |       type: "data-editor",
 49 |       label: "选项",
 50 |       attrs: {
 51 |         types: ["string", "array", "function", "promise", "asyncfunction"],
 52 |         rows: 10
 53 |       },
 54 |       vif: data => data.isOptions,
 55 |       tip:
 56 |         'options支持`API接口`、`数组`、`函数`、`Promise`等, 具体看<a target="_blank" href="https://www.yuque.com/chaojie-vjiel/vbwzgu/rgenav" class="el-link el-link--primary">文档</a>'
 57 |     },
 58 |     prop: {
 59 |       type: "data-editor",
 60 |       label: "options 配置",
 61 |       vif: data => data.isOptions,
 62 |       attrs: {
 63 |         types: ["object"],
 64 |         rows: 4
 65 |       }
 66 |     },
 67 |     optionsLinkageFields: {
 68 |       type: "dynamic",
 69 |       vif: data => data.isOptions,
 70 |       label: "options 关联属性"
 71 |     },
 72 |     vif: {
 73 |       type: "data-editor",
 74 |       label: "联动显示/隐藏",
 75 |       attrs: {
 76 |         types: ["function", "boolean"]
 77 |       },
 78 |       tip:
 79 |         '支持`布尔值`和`函数`，具体请查看：<a target="_blank" href="https://www.yuque.com/chaojie-vjiel/vbwzgu/loffm6#wOVyc" class="el-link el-link--primary">文档</a>'
 80 |     },
 81 |     disabled: {
 82 |       type: "data-editor",
 83 |       label: "联动启用/禁用",
 84 |       attrs: {
 85 |         types: ["function", "boolean", "string"]
 86 |       },
 87 |       tip:
 88 |         '支持`布尔值`和`函数`，具体请查看：<a target="_blank" href="https://www.yuque.com/chaojie-vjiel/vbwzgu/loffm6#zaIsz" class="el-link el-link--primary">文档</a>'
 89 |     },
 90 |     tip: {
 91 |       type: "input",
 92 |       label: "表单项提示"
 93 |     },
 94 |     isShowLabel: {
 95 |       label: "否显示标签",
 96 |       type: "radio-button",
 97 |       tip: "与全局isShowLabel作用相同",
 98 |       options: [
 99 |         { text: "显示", value: undefined },
100 |         { text: "隐藏", value: false }
101 |       ]
102 |     },
103 |     labelWidth: {
104 |       label: "标签宽度",
105 |       type: "input",
106 |       tip: "需要以`px`作为单位, 例如`100px`, 默认为全局设置的labelWidth值"
107 |     },
108 |     break: {
109 |       label: "强制折行",
110 |       type: "radio-button",
111 |       options: [
112 |         { text: "正常", value: undefined },
113 |         { text: "折行", value: true }
114 |       ]
115 |     },
116 |     displayFormatter: {
117 |       label: "显示处理函数",
118 |       type: "data-editor",
119 |       attrs: {
120 |         types: ["function"]
121 |       }
122 |     },
123 |     valueFormatter: {
124 |       label: "最终值处理函数",
125 |       type: "data-editor",
126 |       attrs: {
127 |         types: ["function"]
128 |       }
129 |     }
130 |   },
131 |   // 覆盖值
132 |   data: {}
133 | };
134 | 


--------------------------------------------------------------------------------
/src/components/main/components/data-dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <el-dialog
  3 |     :visible="visible"
  4 |     append-to-body
  5 |     title="数据编辑"
  6 |     :close-on-click-modal="false"
  7 |     @update:visible="$emit('change', $event)"
  8 |   >
  9 |     <el-alert
 10 |       title="数据必须为对象"
 11 |       type="warning"
 12 |       show-icon
 13 |       style="margin-bottom: 20px"
 14 |     ></el-alert>
 15 |     <prism-editor
 16 |       class="f-render-code"
 17 |       v-model="code"
 18 |       :highlight="highlighter"
 19 |       line-numbers
 20 |     ></prism-editor>
 21 |     <div style="text-align: center;margin-top: 20px">
 22 |       <el-button @click="handleChangeCode" type="primary">更改数据</el-button>
 23 |       <el-button @click="handleCopyData" type="primary">复制数据</el-button>
 24 |       <el-button type="primary"
 25 |         ><el-link
 26 |           :href="fileURL"
 27 |           style="color: white;"
 28 |           :underline="false"
 29 |           :download="`${Date.now()}.js`"
 30 |           >下载数据</el-link
 31 |         ></el-button
 32 |       >
 33 |       <el-button @click="$emit('change', false)">关闭弹窗</el-button>
 34 |     </div>
 35 |   </el-dialog>
 36 | </template>
 37 | 
 38 | <script>
 39 | import { highlight, languages } from "prismjs/components/prism-core";
 40 | import "prismjs/components/prism-clike";
 41 | import "prismjs/components/prism-javascript";
 42 | 
 43 | import _ from "lodash";
 44 | import copy from "clipboard-copy";
 45 | import { reomveQuotes, objectToArr } from "../../../utils";
 46 | 
 47 | export default {
 48 |   inject: ["frender"],
 49 |   props: {
 50 |     visible: {
 51 |       type: Boolean,
 52 |       default: false
 53 |     }
 54 |   },
 55 |   data() {
 56 |     return {
 57 |       code: "",
 58 |       fileURL: ""
 59 |     };
 60 |   },
 61 |   watch: {
 62 |     visible(val) {
 63 |       if (val) {
 64 |         this.code = reomveQuotes(this.frender.getFormConfigStr());
 65 |       }
 66 |     },
 67 |     code: {
 68 |       handler() {
 69 |         // 防抖，最后一次起作用
 70 |         if (!this.codeToURL) {
 71 |           this.codeToURL = _.debounce(() => {
 72 |             // 将代码转为 URL
 73 |             const blob = new Blob([this.code]);
 74 |             this.fileURL = URL.createObjectURL(blob);
 75 |           }, 300);
 76 |         }
 77 |         this.codeToURL();
 78 |       },
 79 |       immediate: true
 80 |     }
 81 |   },
 82 |   methods: {
 83 |     // 高亮配置
 84 |     highlighter(code) {
 85 |       return highlight(code, languages.js);
 86 |     },
 87 |     // 保存数据
 88 |     handleChangeCode() {
 89 |       try {
 90 |         // 将字符串转为对象
 91 |         const res = eval("(" + this.code + ")");
 92 |         // 判断是否为对象
 93 |         if (_.isPlainObject(res)) {
 94 |           // 1. 通过解构符合的方式分离出 formDesc 和 formPropsData
 95 |           const { formDesc = {}, order = [], ...formPropsData } = res;
 96 |           // 2. 赋值 frender.formPropsData
 97 |           this.frender.formPropsData = Object.assign(formPropsData, {
 98 |             order: order || Object.keys(formDesc)
 99 |           });
100 |           // 3. 将 formDesc 转为数组，并赋值给 frender.formItemList
101 |           this.frender.formItemList = objectToArr(formDesc, "field").map(item =>
102 |             Object.assign({ attrs: {} }, item)
103 |           );
104 | 
105 |           // 关闭弹窗
106 |           this.$emit("change");
107 |         } else {
108 |           // 抛出解析异常
109 |           throw new TypeError(res + ", 类型错误，非对象");
110 |         }
111 |       } catch (err) {
112 |         // 错误提示
113 |         this.$message.error("解析失败，非 JS 对象，请检查");
114 |         console.error(err);
115 |       }
116 |     },
117 |     // 复制数据
118 |     handleCopyData() {
119 |       copy(this.code);
120 |       this.$message.success("复制成功!");
121 |     }
122 |   }
123 | };
124 | </script>
125 | 


--------------------------------------------------------------------------------
/src/fixtures/extends/table-editor.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   type: "table-editor",
  3 |   label: "表格内容编辑组件",
  4 |   config: {
  5 |     url: "https://github.com/dream2023/vue-ele-form-table-editor",
  6 |     attrs: {
  7 |       config: {
  8 |         columns: {
  9 |           type: "data-editor",
 10 |           label: "table 列",
 11 |           required: true,
 12 |           attrs: {
 13 |             types: ["array", "object"]
 14 |           },
 15 |           rows: 12
 16 |         },
 17 |         isShowDelete: {
 18 |           type: "switch",
 19 |           label: "是否显示删除"
 20 |         },
 21 |         isShowAdd: {
 22 |           type: "switch",
 23 |           label: "是否显示新增按钮"
 24 |         },
 25 |         addBtnText: {
 26 |           type: "input",
 27 |           label: "新增按钮文本"
 28 |         },
 29 |         newColumnValue: {
 30 |           type: "data-editor",
 31 |           label: "新增列的值",
 32 |           attrs: {
 33 |             types: ["object"]
 34 |           }
 35 |         },
 36 |         rules: {
 37 |           type: "data-editor",
 38 |           label: "校检规则",
 39 |           attrs: {
 40 |             types: ["object", "array"],
 41 |             rows: 10
 42 |           }
 43 |         },
 44 |         extraBtns: {
 45 |           type: "data-editor",
 46 |           label: "右侧其它按钮",
 47 |           attrs: {
 48 |             types: ["array"]
 49 |           }
 50 |         },
 51 |         deleteBtnAttr: {
 52 |           type: "data-editor",
 53 |           label: "删除按钮属性",
 54 |           attrs: {
 55 |             types: ["object"]
 56 |           }
 57 |         },
 58 |         tableAttrs: {
 59 |           type: "data-editor",
 60 |           label: "表格属性",
 61 |           attrs: {
 62 |             types: ["object"]
 63 |           }
 64 |         }
 65 |       },
 66 |       data: {
 67 |         columns: [
 68 |           {
 69 |             // el-table-column 的属性
 70 |             type: "index",
 71 |             width: 50
 72 |           },
 73 |           {
 74 |             // el-table-column 的属性
 75 |             prop: "grade",
 76 |             label: "年级"
 77 |           },
 78 |           {
 79 |             prop: "name",
 80 |             label: "姓名",
 81 |             content: {
 82 |               type: "el-input",
 83 |               attrs: {
 84 |                 placeholder: "学员姓名"
 85 |               }
 86 |             }
 87 |           },
 88 |           {
 89 |             label: "缴费",
 90 |             width: 200,
 91 |             content: [
 92 |               "已缴纳: ",
 93 |               {
 94 |                 type: "el-input",
 95 |                 valueKey: "tuition",
 96 |                 style: {
 97 |                   width: "100px",
 98 |                   marginRight: "10px"
 99 |                 }
100 |               }
101 |             ]
102 |           },
103 |           {
104 |             prop: "dream",
105 |             label: "梦想",
106 |             content: {
107 |               type: "el-select",
108 |               options: [
109 |                 { text: "科学家", value: "scientist" },
110 |                 { text: "警察", value: "policeman" },
111 |                 "程序员"
112 |               ]
113 |             }
114 |           }
115 |         ],
116 |         newColumnValue: {
117 |           grade: "三年级二班"
118 |         }
119 |       }
120 |     },
121 |     common: {
122 |       config: {
123 |         default: {
124 |           type: "data-editor",
125 |           label: "默认值",
126 |           attrs: {
127 |             types: ["array"]
128 |           }
129 |         }
130 |       },
131 |       data: {
132 |         default: [
133 |           {
134 |             grade: "三年级二班",
135 |             name: "小张",
136 |             sex: 1,
137 |             tuition: 2000,
138 |             unPay: 100,
139 |             dream: ""
140 |           }
141 |         ]
142 |       }
143 |     }
144 |   }
145 | };
146 | 


--------------------------------------------------------------------------------
/src/components/main/main-header.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="main-header">
  3 |     <div class="f-render-header main-header-btns">
  4 |       <div>
  5 |         <template v-for="key of frender.operations">
  6 |           <!-- 根据 key 获取对应的 operationBtns 内容 -->
  7 |           <el-button
  8 |             :key="key"
  9 |             :icon="operationBtns[key].icon"
 10 |             @click="operationBtns[key].click"
 11 |             v-if="operationBtns[key]"
 12 |             type="text"
 13 |             >{{ operationBtns[key].label }}</el-button
 14 |           >
 15 |         </template>
 16 |       </div>
 17 |       <div v-if="frender.operations.includes('save')">
 18 |         <el-button @click="$emit('save')" icon="el-icon-upload2" type="text"
 19 |           >保存数据</el-button
 20 |         >
 21 |       </div>
 22 |     </div>
 23 | 
 24 |     <!-- 预览弹窗 -->
 25 |     <template v-for="key of frender.operations">
 26 |       <component
 27 |         :visible="operationBtns[key].visible"
 28 |         v-if="operationBtns[key] && operationBtns[key].isComponent !== false"
 29 |         :key="key"
 30 |         :is="`${key}-dialog`"
 31 |         @change="operationBtns[key].click"
 32 |       />
 33 |     </template>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import PreviewDialog from "./components/preview-dialog";
 39 | import DataDialog from "./components/data-dialog";
 40 | import CodeDialog from "./components/code-dialog";
 41 | import BatchDialog from "./components/batch-dialog";
 42 | 
 43 | export default {
 44 |   inject: ["frender"],
 45 |   components: {
 46 |     PreviewDialog,
 47 |     DataDialog,
 48 |     CodeDialog,
 49 |     BatchDialog
 50 |   },
 51 |   data() {
 52 |     // 切换 visible
 53 |     const createToggleVisibleFn = key => {
 54 |       return () => {
 55 |         this.$set(
 56 |           this.operationBtns[key],
 57 |           "visible",
 58 |           !this.operationBtns[key].visible
 59 |         );
 60 |       };
 61 |     };
 62 |     return {
 63 |       // 左侧按钮列表
 64 |       operationBtns: {
 65 |         // 按钮的 key 和 frender 中 operationBtns 一一对应
 66 |         preview: {
 67 |           // 按钮的 icon
 68 |           icon: "el-icon-view",
 69 |           // 按钮的内容
 70 |           label: "预览",
 71 |           // 增加 visible: false
 72 |           visible: false,
 73 |           // 增加 click
 74 |           click: createToggleVisibleFn("preview")
 75 |         },
 76 |         data: {
 77 |           icon: "el-icon-edit",
 78 |           label: "更改数据",
 79 |           // 增加 visible: false
 80 |           visible: false,
 81 |           // 增加 click
 82 |           click: createToggleVisibleFn("data")
 83 |         },
 84 |         code: {
 85 |           icon: "el-icon-tickets",
 86 |           label: "生成代码",
 87 |           // 增加 visible: false
 88 |           visible: false,
 89 |           // 增加 click
 90 |           click: createToggleVisibleFn("code")
 91 |         },
 92 |         batch: {
 93 |           icon: "el-icon-plus",
 94 |           label: "批量添加",
 95 |           // 增加 visible: false
 96 |           visible: false,
 97 |           // 增加 click
 98 |           click: createToggleVisibleFn("batch")
 99 |         },
100 |         clear: {
101 |           icon: "el-icon-delete",
102 |           label: "清空表单",
103 |           // 不是组件
104 |           isComponent: false,
105 |           // 增加 click
106 |           click: () => {
107 |             // 将表单项置为空数组
108 |             this.frender.formItemList = [];
109 |             // 将表单属性置为原默认值
110 |             this.frender.initFormPropsData();
111 |           }
112 |         }
113 |       }
114 |     };
115 |   }
116 | };
117 | </script>
118 | 
119 | <style lang="css">
120 | /* 按钮列表 */
121 | .main-header-btns {
122 |   display: flex;
123 |   justify-content: space-between;
124 |   padding: 0 15px;
125 | }
126 | 
127 | /* 代码编辑区 */
128 | .f-render-code {
129 |   background: #2d2d2d;
130 |   color: #ccc;
131 |   font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
132 |   font-size: 14px;
133 |   line-height: 1.5;
134 |   padding: 5px;
135 |   height: 350px;
136 |   margin-top: 20px;
137 |   min-height: 350px;
138 | }
139 | 
140 | /* 去除默认边框 */
141 | .f-render-code .prism-editor__textarea:focus {
142 |   outline: none;
143 | }
144 | </style>
145 | 


--------------------------------------------------------------------------------
/src/fixtures/form-props.js:
--------------------------------------------------------------------------------
  1 | export default {
  2 |   config: {
  3 |     inline: {
  4 |       type: "radio-button",
  5 |       label: "inline模式 / layout模式",
  6 |       options: [
  7 |         { text: "layout模式", value: undefined },
  8 |         { text: "inline模式", value: true }
  9 |       ]
 10 |     },
 11 |     isResponsive: {
 12 |       type: "radio-button",
 13 |       label: "是否响应式",
 14 |       vif: data => !data.inline,
 15 |       options: [
 16 |         { text: "是", value: undefined },
 17 |         { text: "否", value: false }
 18 |       ]
 19 |     },
 20 |     labelPosition: {
 21 |       type: "radio-button",
 22 |       label: "标签位置",
 23 |       options(data) {
 24 |         const options = ["left", "right", "top"];
 25 |         if (data.isResponsive !== false && !data.inline) {
 26 |           options.unshift({ text: "响应式", value: undefined });
 27 |         }
 28 |         return options;
 29 |       }
 30 |     },
 31 |     span: {
 32 |       type: "select",
 33 |       label: "表单宽度",
 34 |       vif: data => !data.inline,
 35 |       options() {
 36 |         const options = Array.from({ length: 24 }, (v, i) => {
 37 |           return { text: `${24 - i} / 24`, value: 24 - i };
 38 |         });
 39 |         options.unshift({ text: "响应式", value: undefined });
 40 |         return options;
 41 |       },
 42 |       style: {
 43 |         width: "100%"
 44 |       }
 45 |     },
 46 |     rules: {
 47 |       type: "data-editor",
 48 |       label: "校检规则",
 49 |       attrs: {
 50 |         types: ["object"]
 51 |       },
 52 |       tip:
 53 |         '校检规则文档, 请<a target="_blank" href="https://www.yuque.com/chaojie-vjiel/vbwzgu/qzzkpd" class="el-link el-link--primary">点击查看</a>'
 54 |     },
 55 |     isDialog: {
 56 |       type: "radio-button",
 57 |       label: "是否为弹窗",
 58 |       options: [
 59 |         { text: "非弹窗", value: undefined },
 60 |         { text: "弹窗", value: true }
 61 |       ]
 62 |     },
 63 |     isShowLabel: {
 64 |       type: "radio-button",
 65 |       label: "是否显示标签",
 66 |       options: [
 67 |         { text: "显示", value: undefined },
 68 |         { text: "不显示", value: false }
 69 |       ]
 70 |     },
 71 |     labelWidth: {
 72 |       type: "input",
 73 |       label: "标签宽度",
 74 |       attrs: {
 75 |         type: "number",
 76 |         min: 0,
 77 |         step: 10
 78 |       },
 79 |       tip: "默认值为 `auto`"
 80 |     },
 81 |     disabled: {
 82 |       type: "radio-button",
 83 |       label: "全局禁用表单",
 84 |       options: [
 85 |         { text: "正常", value: undefined },
 86 |         { text: "禁用", value: true }
 87 |       ]
 88 |     },
 89 |     readonly: {
 90 |       type: "radio-button",
 91 |       label: "全局只读表单",
 92 |       options: [
 93 |         { text: "正常", value: undefined },
 94 |         { text: "只读", value: true }
 95 |       ]
 96 |     },
 97 |     isShowErrorNotify: {
 98 |       type: "radio-button",
 99 |       label: "是否在校检错误后显示右上角提示",
100 |       options: [
101 |         { text: "显示", value: undefined },
102 |         { text: "不显示", value: false }
103 |       ]
104 |     },
105 |     isShowSubmitBtn: {
106 |       type: "radio-button",
107 |       label: "提交按钮",
108 |       options: [
109 |         { text: "显示", value: undefined },
110 |         { text: "隐藏", value: false }
111 |       ]
112 |     },
113 |     isShowBackBtn: {
114 |       type: "radio-button",
115 |       label: "返回按钮",
116 |       options: [
117 |         { text: "显示", value: undefined },
118 |         { text: "隐藏", value: false }
119 |       ]
120 |     },
121 |     formBtnSize: {
122 |       type: "radio-button",
123 |       label: "表单按钮大小",
124 |       options: [{ text: "默认", value: undefined }, "medium", "small", "mini"]
125 |     },
126 |     isShowResetBtn: {
127 |       type: "radio-button",
128 |       label: "重置按钮",
129 |       options: [
130 |         { text: "显示", value: true },
131 |         { text: "隐藏", value: undefined }
132 |       ]
133 |     },
134 |     isShowCancelBtn: {
135 |       type: "radio-button",
136 |       label: "取消按钮",
137 |       options: [
138 |         { text: "显示", value: true },
139 |         { text: "隐藏", value: undefined }
140 |       ]
141 |     },
142 |     submitBtnText: {
143 |       type: "input",
144 |       label: "提交按钮文字"
145 |     },
146 |     backBtnText: {
147 |       type: "input",
148 |       label: "返回按钮文字"
149 |     },
150 |     cancelBtnText: {
151 |       type: "input",
152 |       label: "取消按钮文字"
153 |     },
154 |     resetBtnText: {
155 |       type: "input",
156 |       label: "返回按钮文字"
157 |     },
158 |     formAttrs: {
159 |       type: "data-editor",
160 |       label: "el-form属性",
161 |       attrs: {
162 |         types: ["object"]
163 |       }
164 |     }
165 |   },
166 |   data: {}
167 | };
168 | 


--------------------------------------------------------------------------------
/src/components/main/main-content.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <perfect-scrollbar class="f-render-scrollarea main-content">
  3 |     <ele-form
  4 |       v-model="formData"
  5 |       ref="ele-form"
  6 |       :formDesc="frender.formDesc"
  7 |       :order="Object.keys(frender.formDesc)"
  8 |       v-bind="frender.formBindProps"
  9 |     >
 10 |       <template v-slot:form-content="{ props, formDesc, formErrorObj }">
 11 |         <vue-draggable
 12 |           :animation="200"
 13 |           v-if="isRenderFinish"
 14 |           :disabled="false"
 15 |           :list="frender.formItemList"
 16 |           @add="handleAdd"
 17 |           @end="handleMoveEnd"
 18 |           @start="handleMoveStart"
 19 |           group="form"
 20 |           tag="el-row"
 21 |           style="padding-bottom: 80px;"
 22 |         >
 23 |           <!-- 当为空时 -->
 24 |           <div
 25 |             class="form-area-placeholder"
 26 |             v-if="frender.formItemList.length === 0"
 27 |           >
 28 |             从左侧拖拽来添加表单项
 29 |           </div>
 30 |           <template v-else>
 31 |             <template v-for="(formItem, field, index) of formDesc">
 32 |               <el-col
 33 |                 :key="field"
 34 |                 v-bind="formItem._colAttrs"
 35 |                 @click.native="handleFormItemClick(index)"
 36 |                 v-if="formItem._vif"
 37 |                 class="form-item"
 38 |                 :class="{
 39 |                   'ele-form-col--break': formItem.break,
 40 |                   'form-item-active': frender.currentIndex === index
 41 |                 }"
 42 |               >
 43 |                 <el-form-item
 44 |                   :error="formErrorObj ? formErrorObj[field] : null"
 45 |                   :prop="field"
 46 |                   :label="
 47 |                     props.isShowLabel && formItem.isShowLabel !== false
 48 |                       ? formItem.label
 49 |                       : null
 50 |                   "
 51 |                   :label-width="formItem.labelWidth || undefined"
 52 |                 >
 53 |                   <component
 54 |                     :disabled="props.disabled || formItem._disabled"
 55 |                     :desc="formItem"
 56 |                     :is="formItem._type"
 57 |                     :options="formItem._options"
 58 |                     :ref="field"
 59 |                     :field="field"
 60 |                     v-model="formItem.default"
 61 |                   />
 62 |                   <div
 63 |                     class="ele-form-tip"
 64 |                     v-if="formItem.tip"
 65 |                     v-html="formItem.tip"
 66 |                   ></div>
 67 |                 </el-form-item>
 68 | 
 69 |                 <!-- 删除按钮 -->
 70 |                 <i
 71 |                   @click.stop="handleDelete(index)"
 72 |                   class="el-icon-delete form-item-delete-btn"
 73 |                   v-if="frender.currentIndex === index"
 74 |                 ></i>
 75 |               </el-col>
 76 |             </template>
 77 |           </template>
 78 |         </vue-draggable>
 79 |       </template>
 80 |     </ele-form>
 81 |   </perfect-scrollbar>
 82 | </template>
 83 | 
 84 | <script>
 85 | export default {
 86 |   inject: ["frender"],
 87 |   data() {
 88 |     return {
 89 |       formData: {},
 90 |       isRenderFinish: false
 91 |     };
 92 |   },
 93 |   mounted() {
 94 |     // 确保渲染结束
 95 |     this.$nextTick(() => {
 96 |       this.isRenderFinish = true;
 97 |     });
 98 |   },
 99 |   methods: {
100 |     // 通过index删除
101 |     deleteItemByIndex(index) {
102 |       this.frender.formItemList.splice(index, 1);
103 |     },
104 |     // 通过index更新
105 |     updateSelectIndex(index) {
106 |       this.frender.currentIndex = index;
107 |     },
108 | 
109 |     // 删除
110 |     handleDelete(index) {
111 |       this.deleteItemByIndex(index);
112 | 
113 |       // 因为如果删除最后一个, 界面则无选中效果
114 |       // 所以这里删除最后一个后, 重新选择最后一个
115 |       if (index >= this.frender.formItemList.length) {
116 |         this.updateSelectIndex(this.frender.formItemList.length - 1);
117 |       }
118 |     },
119 | 
120 |     // 新增
121 |     handleAdd(res) {
122 |       this.updateSelectIndex(res.newIndex);
123 |     },
124 | 
125 |     // 移动开始
126 |     handleMoveStart(res) {
127 |       this.updateSelectIndex(res.oldIndex);
128 |     },
129 | 
130 |     // 移动结束
131 |     handleMoveEnd(res) {
132 |       this.updateSelectIndex(res.newIndex);
133 |     },
134 | 
135 |     // 点击选中
136 |     handleFormItemClick(index) {
137 |       this.updateSelectIndex(index);
138 |     }
139 |   }
140 | };
141 | </script>
142 | 
143 | <style lang="css">
144 | /* 中间区域 */
145 | .main-content {
146 |   padding: 20px;
147 | }
148 | 
149 | /* 表单样式 */
150 | .main-content .el-form {
151 |   border: 1px dashed #dcdfe6;
152 |   padding: 20px;
153 |   box-sizing: border-box;
154 |   border-radius: 4px;
155 | }
156 | 
157 | /* 当无表单时的占位 */
158 | .main-content .form-area-placeholder {
159 |   width: 100%;
160 |   height: 300px;
161 |   line-height: 300px;
162 |   background-color: white;
163 |   color: #909399;
164 |   text-align: center;
165 | }
166 | /* 表单项 */
167 | .main-content .form-item {
168 |   background: white;
169 |   cursor: move;
170 |   position: relative;
171 |   z-index: 1;
172 |   padding: 0 20px;
173 |   border: 1px dashed rgba(0, 0, 0, 0);
174 | }
175 | /* 表单项激活时 */
176 | .main-content .form-item-active {
177 |   border: 1px dashed #409eff;
178 | }
179 | 
180 | /* 遮挡区(遮挡住，不允许直接输入等操作) */
181 | .main-content .form-item::after {
182 |   content: " ";
183 |   display: block;
184 |   left: 0;
185 |   top: 0;
186 |   right: 0;
187 |   bottom: 0;
188 |   position: absolute;
189 |   z-index: 2;
190 | }
191 | 
192 | /* 删除按钮 */
193 | .main-content .form-item .form-item-delete-btn {
194 |   position: absolute;
195 |   right: 0;
196 |   bottom: 0;
197 |   z-index: 3;
198 |   cursor: pointer;
199 |   padding: 7px 15px;
200 |   color: white;
201 |   background: #409eff;
202 | }
203 | </style>
204 | 


--------------------------------------------------------------------------------
/src/components/main/components/batch-dialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <ele-form-dialog
  3 |     v-model="formData"
  4 |     :formDesc="formDesc"
  5 |     labelPosition="left"
  6 |     width="800px"
  7 |     :dialogAttrs="{
  8 |       'close-on-click-modal': false,
  9 |       'append-to-body': true
 10 |     }"
 11 |     @request="handleAdd"
 12 |     :visible="visible"
 13 |     @update:visible="$emit('change')"
 14 |     title="批量添加表单项"
 15 |   ></ele-form-dialog>
 16 | </template>
 17 | 
 18 | <script>
 19 | import _ from "lodash";
 20 | 
 21 | export default {
 22 |   inject: ["frender"],
 23 |   props: {
 24 |     visible: {
 25 |       type: Boolean,
 26 |       default: false
 27 |     }
 28 |   },
 29 |   watch: {
 30 |     visible(val) {
 31 |       if (val) {
 32 |         this.formData = {
 33 |           type: "dynamic",
 34 |           formItems: []
 35 |         };
 36 |       }
 37 |     }
 38 |   },
 39 |   computed: {
 40 |     // 字段出现的次数
 41 |     fieldCountObj() {
 42 |       return _.countBy(this.frender.formItemList, o => String(o.field).trim());
 43 |     },
 44 |     formDesc() {
 45 |       return {
 46 |         type: {
 47 |           type: "radio",
 48 |           label: "添加方式",
 49 |           default: "dynamic",
 50 |           options: [
 51 |             { text: "逐个新增", value: "dynamic" },
 52 |             {
 53 |               text: "数据库导入(待开发)",
 54 |               value: "mysql",
 55 |               attrs: { disabled: true }
 56 |             }
 57 |           ]
 58 |         },
 59 |         formItems: {
 60 |           type: "dynamic",
 61 |           label: "表单项",
 62 |           isTypeChangeReloadValue: false,
 63 |           attrs: {
 64 |             columns: [
 65 |               {
 66 |                 type: "el-input",
 67 |                 valueKey: "field",
 68 |                 attrs: {
 69 |                   placeholder: "请输入 field"
 70 |                 }
 71 |               },
 72 |               {
 73 |                 type: "el-input",
 74 |                 valueKey: "label",
 75 |                 attrs: {
 76 |                   placeholder: "请输入 label"
 77 |                 }
 78 |               },
 79 |               {
 80 |                 type: "el-select",
 81 |                 valueKey: "type",
 82 |                 slots: {
 83 |                   default: h => {
 84 |                     return this.frender.sortedComps.map(item =>
 85 |                       h("el-option", {
 86 |                         attrs: {
 87 |                           label: `${item.type} - ${item.label}`,
 88 |                           value: item.type
 89 |                         }
 90 |                       })
 91 |                     );
 92 |                   }
 93 |                 },
 94 |                 attrs: {
 95 |                   filterable: true,
 96 |                   placeholder: "请输入选择 type"
 97 |                 }
 98 |               }
 99 |             ]
100 |           },
101 |           rules: {
102 |             type: "array",
103 |             validator: (rule, value, callback) => {
104 |               let errorArr = [];
105 |               if (Array.isArray(value) && value.length) {
106 |                 // 当前输入表单的字段统计个数
107 |                 const currentFieldCountObj = _.countBy(value, o =>
108 |                   String(o.field).trim()
109 |                 );
110 | 
111 |                 // 合并后的字段统计个数
112 |                 const mergedCountObj = Object.assign(
113 |                   {},
114 |                   currentFieldCountObj,
115 |                   _.mapValues(this.fieldCountObj, (val, field) => {
116 |                     return currentFieldCountObj[field]
117 |                       ? val + currentFieldCountObj[field]
118 |                       : val;
119 |                   })
120 |                 );
121 | 
122 |                 // 字段不可重复
123 |                 errorArr = value
124 |                   .map((item, index) =>
125 |                     mergedCountObj[item.field] > 1
126 |                       ? `第${index + 1}行的 field 重复`
127 |                       : null
128 |                   )
129 |                   .filter(Boolean);
130 | 
131 |                 // 字段不可为空
132 |                 errorArr = errorArr.concat(
133 |                   value
134 |                     .map((item, index) => {
135 |                       const errMsg = [];
136 |                       if (!item.field) errMsg.push("field");
137 |                       if (!item.label) errMsg.push("label");
138 |                       if (!item.type) errMsg.push("type");
139 | 
140 |                       return errMsg.length
141 |                         ? `第${index + 1}行的 ${errMsg.join("、")} 未填写`
142 |                         : null;
143 |                     })
144 |                     .filter(Boolean)
145 |                 );
146 |               }
147 |               errorArr.length
148 |                 ? callback(new Error(errorArr.join(" & ")))
149 |                 : callback();
150 |             }
151 |           }
152 |         }
153 |       };
154 |     }
155 |   },
156 |   data() {
157 |     return {
158 |       formData: {
159 |         type: "dynamic",
160 |         formItems: []
161 |       }
162 |     };
163 |   },
164 |   methods: {
165 |     handleAdd({ formItems }) {
166 |       try {
167 |         const newFormItems = formItems.map(({ field, label, type }) => ({
168 |           ...this.frender.getFormItemByType(type),
169 |           field: String(field).trim(),
170 |           label: String(label).trim()
171 |         }));
172 | 
173 |         this.frender.formItemList = [
174 |           ...this.frender.formItemList,
175 |           ...newFormItems
176 |         ];
177 | 
178 |         this.$message.success("添加成功");
179 |         // 恢复数据
180 |         this.formData = {
181 |           type: "dynamic",
182 |           formItems: []
183 |         };
184 | 
185 |         this.$emit("change", false);
186 |       } catch (err) {
187 |         console.error(err);
188 |       }
189 |     }
190 |   }
191 | };
192 | </script>
193 | 


--------------------------------------------------------------------------------
/src/components/right/components/form-item-rules.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 新增校检 -->
  3 |   <ele-form-dialog
  4 |     v-model="formData"
  5 |     :formDesc="formDesc"
  6 |     @request="handleAddRule"
  7 |     :visible="visible"
  8 |     :dialogAttrs="{
  9 |       'append-to-body': true
 10 |     }"
 11 |     :formBtns="formBtns"
 12 |     @update:visible="toggleDialog"
 13 |     title="新增校检规则"
 14 |   />
 15 | </template>
 16 | 
 17 | <script>
 18 | const cloneDeep = require("clone");
 19 | import { changeFormDescLabel } from "../../../utils";
 20 | 
 21 | export default {
 22 |   inject: ["frender"],
 23 |   props: {
 24 |     visible: {
 25 |       type: Boolean,
 26 |       default: false
 27 |     }
 28 |   },
 29 |   watch: {
 30 |     visible(value) {
 31 |       if (value) {
 32 |         this.formData = {};
 33 |       }
 34 |     }
 35 |   },
 36 |   data() {
 37 |     const rangeLinkageFn = data =>
 38 |       ["any", "string", "number", "array", "float", "integer", "hex"].includes(
 39 |         data.type
 40 |       );
 41 |     return {
 42 |       formData: {},
 43 |       formDesc: changeFormDescLabel({
 44 |         type: {
 45 |           type: "select",
 46 |           label: "类型",
 47 |           default: null,
 48 |           layout: 12,
 49 |           attrs: {
 50 |             clearable: true
 51 |           },
 52 |           options: [
 53 |             { value: "string", desc: "必须是 string" },
 54 |             { value: "number", desc: "必须是 number" },
 55 |             { value: "boolean", desc: "必须是 boolean" },
 56 |             { value: "integer", desc: "整数" },
 57 |             { value: "float", desc: "浮点数" },
 58 |             { value: "enum", desc: "值必须出现在 enmu 枚举值中" },
 59 |             { value: "date", desc: "合法的日期，使用 Date 判断" },
 60 |             { value: "url", desc: "URL" },
 61 |             { value: "email", desc: "邮箱地址" },
 62 |             { value: "array", desc: "必须是数组，通过 Array.isArray 判断" },
 63 |             { value: "object", desc: "是对象且不为数组" },
 64 |             { value: "method", desc: "必须是 function" },
 65 |             { value: "hex", desc: "16进制" }
 66 |           ],
 67 |           slots: {
 68 |             default(h, { options }) {
 69 |               const res = options.map(option =>
 70 |                 h("el-option", { attrs: { value: option.value } }, [
 71 |                   h("span", { style: { float: "left" } }, option.value),
 72 |                   h(
 73 |                     "span",
 74 |                     {
 75 |                       style: {
 76 |                         float: "right",
 77 |                         color: "#8492a6",
 78 |                         fontSize: "13px"
 79 |                       }
 80 |                     },
 81 |                     option.desc
 82 |                   )
 83 |                 ])
 84 |               );
 85 |               return res;
 86 |             }
 87 |           }
 88 |         },
 89 |         trigger: {
 90 |           type: "select",
 91 |           label: "触发方式",
 92 |           layout: 12,
 93 |           attrs: {
 94 |             clearable: true
 95 |           },
 96 |           options: ["change", "blur"]
 97 |         },
 98 |         pattern: {
 99 |           type: "input",
100 |           layout: 12,
101 |           label: "正则表达式文本",
102 |           slots: {
103 |             prepend: h => h("span", "/"),
104 |             append: h => h("span", "/")
105 |           },
106 |           valueFormatter(val) {
107 |             return val ? eval("(/" + val + "/)") : val;
108 |           },
109 |           vif: data => ["any", "regexp", "string", "url"].includes(data.type)
110 |         },
111 |         min: {
112 |           type: "number",
113 |           label: "范围最小值",
114 |           vif: rangeLinkageFn,
115 |           layout: 12
116 |         },
117 |         max: {
118 |           type: "number",
119 |           label: "范围最大值",
120 |           layout: 12,
121 |           vif: rangeLinkageFn
122 |         },
123 |         len: {
124 |           type: "number",
125 |           label: "val.length(字符串 OR 数组) / 数值)",
126 |           layout: 12,
127 |           vif: rangeLinkageFn
128 |         },
129 |         enum: {
130 |           type: "dynamic",
131 |           label: "枚举值",
132 |           default: [],
133 |           layout: 12,
134 |           vif: data => data.type === "enum"
135 |         },
136 |         message: {
137 |           type: "input",
138 |           label: "提示信息",
139 |           layout: 12,
140 |           attrs: {
141 |             clearable: true
142 |           }
143 |         }
144 |       }),
145 |       formBtns: [
146 |         {
147 |           text: "提交并新增",
148 |           type: "primary",
149 |           click: () => {
150 |             this.handleAddRule(this.formData, false);
151 |           }
152 |         }
153 |       ]
154 |     };
155 |   },
156 |   methods: {
157 |     handleAddRule(data, isClose = true) {
158 |       // 过滤掉空值
159 |       const filteredData = cloneDeep(data);
160 |       for (const key in filteredData) {
161 |         if (!data[key]) {
162 |           delete filteredData[key];
163 |         }
164 |       }
165 |       if (filteredData.enum && filteredData.enum.length == 0) {
166 |         delete filteredData.enum;
167 |       }
168 | 
169 |       if (Object.keys(filteredData).length === 0) return;
170 | 
171 |       // 更改 formItemList 中当前正在编辑的表单项的 rules
172 |       const currentItem = this.frender.formItemList[this.frender.currentIndex];
173 |       this.$set(
174 |         this.frender.formItemList[this.frender.currentIndex],
175 |         "rules",
176 |         (currentItem.rules || []).concat(filteredData)
177 |       );
178 | 
179 |       // 关闭弹窗
180 |       if (isClose) {
181 |         this.toggleDialog();
182 |       } else {
183 |         // 回复默认值
184 |         this.formData = {};
185 |       }
186 | 
187 |       this.$message.success("创建成功");
188 |     },
189 | 
190 |     toggleDialog(visible = false) {
191 |       this.$emit("update:visible", visible);
192 |     }
193 |   }
194 | };
195 | </script>
196 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # Changelog
  2 | 
  3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
  4 | 
  5 | ### [4.12.2](https://github.com/dream2023/f-render/compare/v4.12.1...v4.12.2) (2020-12-22)
  6 | 
  7 | 
  8 | ### Bug Fixes
  9 | 
 10 | * **#66:** attrs 属性未隔离 & 火狐浏览器拖拽打开新页面 ([7d733e9](https://github.com/dream2023/f-render/commit/7d733e94131d8ae6a9384b6b25cf8a1c0009136f)), closes [#66](https://github.com/dream2023/f-render/issues/66)
 11 | 
 12 | ### [4.12.1](https://github.com/dream2023/f-render/compare/v4.12.0...v4.12.1) (2020-11-17)
 13 | 
 14 | ## [4.12.0](https://github.com/dream2023/f-render/compare/v4.10.2...v4.12.0) (2020-11-01)
 15 | 
 16 | 
 17 | ### Features
 18 | 
 19 | * 增加插槽 & 右侧属性面板配置 ([106fa49](https://github.com/dream2023/f-render/commit/106fa49f965366bd53dc90f3d8541ca0089c0b98))
 20 | 
 21 | ## [4.11.0](https://github.com/dream2023/f-render/compare/v4.10.2...v4.11.0) (2020-11-01)
 22 | 
 23 | 
 24 | ### Features
 25 | 
 26 | * 增加插槽 & 右侧属性面板配置 ([106fa49](https://github.com/dream2023/f-render/commit/106fa49f965366bd53dc90f3d8541ca0089c0b98))
 27 | 
 28 | ### [4.10.2](https://github.com/dream2023/f-render/compare/v4.10.1...v4.10.2) (2020-10-23)
 29 | 
 30 | 
 31 | ### Bug Fixes
 32 | 
 33 | * 修复 BUG ([fe50821](https://github.com/dream2023/f-render/commit/fe50821918dfd1106ee23feccae3f88a102d771b))
 34 | * 修复 switch 相关 BUG ([dfd0a7e](https://github.com/dream2023/f-render/commit/dfd0a7ecc349322983e8a5507641d547829d1618))
 35 | 
 36 | ### [4.10.1](https://github.com/dream2023/f-render/compare/v4.9.0...v4.10.1) (2020-10-16)
 37 | 
 38 | ## [4.10.0](https://github.com/dream2023/f-render/compare/v4.8.0...v4.10.0) (2020-10-14)
 39 | 
 40 | ### Features
 41 | 
 42 | - 兼容 ie11 ([4a140df](https://github.com/dream2023/f-render/commit/4a140dfe7a9a6460170c8905b308b2a613b1ade6))
 43 | 
 44 | ## [4.8.0](https://github.com/dream2023/f-render/compare/v4.7.2...v4.8.0) (2020-09-14)
 45 | 
 46 | ### Features
 47 | 
 48 | - 修复级联组件默认值 BUG ([c950d55](https://github.com/dream2023/f-render/commit/c950d55cca9b6fb12e2568b71c1bcece51711652))
 49 | 
 50 | ### [4.7.2](https://github.com/dream2023/f-render/compare/v4.7.1...v4.7.2) (2020-09-10)
 51 | 
 52 | ### Bug Fixes
 53 | 
 54 | - **#49:** 增加强制换行属性 ([fbbb9a5](https://github.com/dream2023/f-render/commit/fbbb9a5423ebd6d067e42f4e4de66e949e468065)), closes [#49](https://github.com/dream2023/f-render/issues/49)
 55 | - form-props 和 form-item-common 增加 default ([b16c006](https://github.com/dream2023/f-render/commit/b16c006b45c176cce4fbe060a1159d5968c40118))
 56 | - layout 会缩小 ([302bb06](https://github.com/dream2023/f-render/commit/302bb06549b8df2f2e12add2a45b43610e4fced3))
 57 | 
 58 | ### [4.7.1](https://github.com/dream2023/f-render/compare/v4.7.0...v4.7.1) (2020-09-05)
 59 | 
 60 | ### Bug Fixes
 61 | 
 62 | - **#62:** 校检更新问题 ([1e7a3cc](https://github.com/dream2023/f-render/commit/1e7a3cc474d288244935f2ab76bfdfbdff7b1a35)), closes [#62](https://github.com/dream2023/f-render/issues/62)
 63 | 
 64 | ## [4.7.0](https://github.com/dream2023/f-render/compare/v4.6.1...v4.7.0) (2020-09-02)
 65 | 
 66 | ### Features
 67 | 
 68 | - 增加 remoteMethod ([f19e705](https://github.com/dream2023/f-render/commit/f19e70583badf51f98a0871063c8c785257069f2))
 69 | 
 70 | ### Bug Fixes
 71 | 
 72 | - 修复 BUG & 升级依赖 ([3134a5c](https://github.com/dream2023/f-render/commit/3134a5cc0608abe4b838dc94067564b79701e872))
 73 | 
 74 | ### [4.6.2](https://github.com/dream2023/f-render/compare/v4.6.1...v4.6.2) (2020-09-01)
 75 | 
 76 | ### Bug Fixes
 77 | 
 78 | - 修复 BUG & 升级依赖 ([3134a5c](https://github.com/dream2023/f-render/commit/3134a5cc0608abe4b838dc94067564b79701e872))
 79 | 
 80 | ### [4.6.1](https://github.com/dream2023/f-render/compare/v4.6.0...v4.6.1) (2020-08-28)
 81 | 
 82 | ### Bug Fixes
 83 | 
 84 | - 修复 options BUG ([0079791](https://github.com/dream2023/f-render/commit/00797910c57c669d6e2163d7317894e01fb28850))
 85 | 
 86 | ## [4.6.0](https://github.com/dream2023/f-render/compare/v4.5.0...v4.6.0) (2020-08-28)
 87 | 
 88 | ### Features
 89 | 
 90 | - 增加点击添加功能 ([f8c53d9](https://github.com/dream2023/f-render/commit/f8c53d9396e22dea7611cf3d13398bcbc4fac897))
 91 | - 增加 order 属性, 避免回显时不一致 ([d81c4f4](https://github.com/dream2023/f-render/commit/d81c4f43050112bfd47f458b8fb160993a94b4b2))
 92 | 
 93 | ### Bug Fixes
 94 | 
 95 | - 处理 options 相关问题 ([ffef651](https://github.com/dream2023/f-render/commit/ffef651e571037b501ce801be9c47598037e1801))
 96 | 
 97 | ## [4.5.0](https://github.com/dream2023/f-render/compare/v4.4.0...v4.5.0) (2020-08-26)
 98 | 
 99 | ### Features
100 | 
101 | - 优化体积 ([9618c00](https://github.com/dream2023/f-render/commit/9618c0017eb5bfe7a0526d07a0ae7b5c4660960e))
102 | 
103 | ### Bug Fixes
104 | 
105 | - 修复 data-editor types 的拼写错误 ([743dc16](https://github.com/dream2023/f-render/commit/743dc16c45786104d7e5ac52c0771ae75e320bc3))
106 | - 升级依赖 & 抽离全局组件 ([333e175](https://github.com/dream2023/f-render/commit/333e175908ddf1c5339aca15dabc615d224cf247))
107 | - 增加配置 ([6d337f5](https://github.com/dream2023/f-render/commit/6d337f5494dc8281a59678aec01248e2785081e1))
108 | 
109 | ## [4.4.0](https://github.com/dream2023/f-render/compare/v4.3.2...v4.4.0) (2020-08-25)
110 | 
111 | ### Features
112 | 
113 | - 切换属性 Tab 时,滚动到顶部 ([00450a5](https://github.com/dream2023/f-render/commit/00450a59302134e0d3fa258434d501c1153ee8e3))
114 | 
115 | ### [4.3.2](https://github.com/dream2023/f-render/compare/v4.3.1...v4.3.2) (2020-08-24)
116 | 
117 | ### [4.3.1](https://github.com/dream2023/f-render/compare/v4.3.0...v4.3.1) (2020-08-24)
118 | 
119 | ## [4.3.0](https://github.com/dream2023/f-render/compare/v3.1.0...v4.3.0) (2020-08-24)
120 | 
121 | ### Features
122 | 
123 | - 增加 Dockerfile ([240c669](https://github.com/dream2023/f-render/commit/240c66998418bd0068e8c78e1b0b945245a4e37c))
124 | - 增加 time-picker 配置 ([1f043ee](https://github.com/dream2023/f-render/commit/1f043eec6d86709cedcbed33132abd4e08239051))
125 | - 正则表达式校检不正确 ([31ca5c2](https://github.com/dream2023/f-render/commit/31ca5c282d57692a5c89b90cef0a46d4666b9d2d))
126 | 
127 | ### Bug Fixes
128 | 
129 | - 修复若干问题 ([#58](https://github.com/dream2023/f-render/issues/58)) ([60c6815](https://github.com/dream2023/f-render/commit/60c681569d842ff0027e0db75df9688441b2d7aa)), closes [#57](https://github.com/dream2023/f-render/issues/57) [#56](https://github.com/dream2023/f-render/issues/56) [#55](https://github.com/dream2023/f-render/issues/55)
130 | - 修复若干 BUG ([b8eea65](https://github.com/dream2023/f-render/commit/b8eea650a0f4b6a6335b392fe2d314d61f814e2b))
131 | - 修复 BUG & 增加联动属性 ([27377b4](https://github.com/dream2023/f-render/commit/27377b47a483c4c4d83fe12ea15fcf153d09858e))
132 | - 依赖报错 ([8eca6b5](https://github.com/dream2023/f-render/commit/8eca6b50fad64d99ed61e312ba72ce3268e9382d))
133 | - 预览清空原数据 ([db60207](https://github.com/dream2023/f-render/commit/db602073f5fc93c67b6d31b13a39aa48888c76e9))
134 | - labelWidth 计算不正确 ([7b35ce1](https://github.com/dream2023/f-render/commit/7b35ce1e67a2b908d2d3a4b4d3dc3a436e69a97e))
135 | 
136 | ## [4.2.0](https://github.com/dream2023/f-render/compare/v3.1.0...v4.2.0) (2020-08-24)
137 | 
138 | ### Features
139 | 
140 | - 增加 Dockerfile ([240c669](https://github.com/dream2023/f-render/commit/240c66998418bd0068e8c78e1b0b945245a4e37c))
141 | - 增加 time-picker 配置 ([1f043ee](https://github.com/dream2023/f-render/commit/1f043eec6d86709cedcbed33132abd4e08239051))
142 | - 正则表达式校检不正确 ([31ca5c2](https://github.com/dream2023/f-render/commit/31ca5c282d57692a5c89b90cef0a46d4666b9d2d))
143 | 
144 | ### Bug Fixes
145 | 
146 | - 修复若干问题 ([#58](https://github.com/dream2023/f-render/issues/58)) ([60c6815](https://github.com/dream2023/f-render/commit/60c681569d842ff0027e0db75df9688441b2d7aa)), closes [#57](https://github.com/dream2023/f-render/issues/57) [#56](https://github.com/dream2023/f-render/issues/56) [#55](https://github.com/dream2023/f-render/issues/55)
147 | - 修复 BUG & 增加联动属性 ([27377b4](https://github.com/dream2023/f-render/commit/27377b47a483c4c4d83fe12ea15fcf153d09858e))
148 | - 依赖报错 ([8eca6b5](https://github.com/dream2023/f-render/commit/8eca6b50fad64d99ed61e312ba72ce3268e9382d))
149 | - 预览清空原数据 ([db60207](https://github.com/dream2023/f-render/commit/db602073f5fc93c67b6d31b13a39aa48888c76e9))
150 | - labelWidth 计算不正确 ([7b35ce1](https://github.com/dream2023/f-render/commit/7b35ce1e67a2b908d2d3a4b4d3dc3a436e69a97e))
151 | 


--------------------------------------------------------------------------------
/src/f-render.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- 1.设计阶段 -->
  3 |   <multipane v-if="!pure" :style="{ height }" class="f-render">
  4 |     <!-- 左侧 -->
  5 |     <slot name="left" :comps="sortedComps" :frender="this">
  6 |       <f-render-left />
  7 |     </slot>
  8 |     <multipane-resizer></multipane-resizer>
  9 |     <!-- 中间 -->
 10 |     <slot name="main" :frender="this">
 11 |       <f-render-main
 12 |         :loading="loading"
 13 |         @save="handleSave"
 14 |         class="f-render-main"
 15 |       />
 16 |     </slot>
 17 |     <template v-if="isShowRight && rightTabs.length">
 18 |       <multipane-resizer></multipane-resizer>
 19 |       <!-- 右侧 -->
 20 |       <slot name="right" :frender="this">
 21 |         <f-render-right class="f-render-right" />
 22 |       </slot>
 23 |     </template>
 24 |   </multipane>
 25 | 
 26 |   <!-- 2.使用 -->
 27 |   <ele-form
 28 |     :formDesc="formDesc"
 29 |     :formData="value"
 30 |     v-bind="formBindProps"
 31 |     ref="form"
 32 |     v-on="$listeners"
 33 |     :class="{ 'pure-form--loading': loading }"
 34 |     @input="$emit('input', value)"
 35 |     v-else
 36 |   >
 37 |     <form-skeleton v-if="loading" />
 38 |   </ele-form>
 39 | </template>
 40 | 
 41 | <script>
 42 | // 全局组件
 43 | import "./global-components";
 44 | 
 45 | // 组件
 46 | import FormSkeleton from "./form-skeleton";
 47 | import FRenderLeft from "./components/left/index";
 48 | import FRenderMain from "./components/main/index";
 49 | import FRenderRight from "./components/right/index";
 50 | import { Multipane, MultipaneResizer } from "vue-multipane";
 51 | 
 52 | // 工具函数
 53 | import _ from "lodash";
 54 | const cloneDeep = require("clone");
 55 | import serialize from "serialize-javascript";
 56 | import { objectToArr, arrToObject, removeEmptyProps } from "./utils";
 57 | 
 58 | // 默认配置
 59 | import compsDefault from "./fixtures/comps";
 60 | import formPropsDefault from "./fixtures/form-props";
 61 | import formItemCommonDefault from "./fixtures/form-item-common";
 62 | 
 63 | // 组件的数据，通过 provide / inject 的形式传递给子组件
 64 | // 主要原因是因为组件嵌套过深，相当于一个状态管理
 65 | // 在业务代码中不推荐使用，provide / inject，会使数据流混乱
 66 | export default {
 67 |   name: "f-render",
 68 |   inheritAttrs: false,
 69 |   components: {
 70 |     FormSkeleton,
 71 |     Multipane,
 72 |     MultipaneResizer,
 73 |     FRenderLeft,
 74 |     FRenderRight,
 75 |     FRenderMain
 76 |   },
 77 |   provide() {
 78 |     return {
 79 |       frender: this
 80 |     };
 81 |   },
 82 |   props: {
 83 |     // 表单内容
 84 |     config: [Object, String],
 85 |     // 设计器整体高度
 86 |     height: {
 87 |       type: [String, Number],
 88 |       default: "400px"
 89 |     },
 90 |     // 保存格式
 91 |     saveFormat: {
 92 |       type: String,
 93 |       default: "string",
 94 |       validator(val) {
 95 |         return ["object", "string"].includes(val);
 96 |       }
 97 |     },
 98 |     // 默认为设计模式
 99 |     // 当为 true 时，表示用户模式
100 |     pure: Boolean,
101 |     // 表单配置
102 |     formProps: {
103 |       type: Object,
104 |       default: () => formPropsDefault
105 |     },
106 |     // 表单项通用配置
107 |     formItemCommon: {
108 |       type: Object,
109 |       default: () => formItemCommonDefault
110 |     },
111 |     // 组件列表
112 |     comps: {
113 |       type: Array,
114 |       default: () => compsDefault
115 |     },
116 |     // 操作配置
117 |     operations: {
118 |       type: Array,
119 |       default: () => ["preview", "data", "code", "batch", "clear", "save"]
120 |     },
121 |     // 是否显示右侧
122 |     isShowRight: {
123 |       type: Boolean,
124 |       default: true
125 |     },
126 |     // 右侧属性面板 Tabs
127 |     rightTabs: {
128 |       type: Array,
129 |       default: () => [
130 |         { label: "表单项属性配置", name: "form-item-common" },
131 |         { label: "组件属性配置", name: "form-item-attrs" },
132 |         { label: "表单配置", name: "form-props" }
133 |       ],
134 |       validator(tabs) {
135 |         return (tabs || []).every(item => item.label && item.name);
136 |       }
137 |     },
138 |     // 是否在加载
139 |     loading: Boolean,
140 | 
141 |     // 表单相关（pure 为 true 时）, 同 vue-ele-form
142 |     // https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn
143 |     value: Object
144 |   },
145 |   watch: {
146 |     config: {
147 |       handler(config) {
148 |         // 判断是否有值
149 |         if (!config) return;
150 |         let formConfig = cloneDeep(config);
151 |         // 如果是字符串，则转为对象
152 |         if (typeof config === "string") {
153 |           try {
154 |             // 有可能解析出错
155 |             formConfig = formConfig ? eval(`(${formConfig})`) : {};
156 |             if (!_.isPlainObject(formConfig)) {
157 |               // 如果不是对象，则也抛出遗产
158 |               throw new TypeError("config 不是对象");
159 |             }
160 |           } catch (err) {
161 |             this.$message.error("数据解析失败");
162 |             console.error(err);
163 |             return;
164 |           }
165 |         }
166 | 
167 |         if (!_.isPlainObject(formConfig)) {
168 |           // 如果不是对象，则也抛出异常
169 |           console.error("[f-render]: config 不是对象", formConfig);
170 |           return;
171 |         }
172 | 
173 |         const { formDesc = {}, ...formPropsData } = cloneDeep(formConfig);
174 | 
175 |         this.formPropsData = Object.assign(this.formPropsData, formPropsData);
176 |         this.formItemList = objectToArr(formDesc, "field").map(item =>
177 |           Object.assign({ attrs: {} }, item)
178 |         );
179 | 
180 |         // 当有数据时，选中第一个
181 |         if (this.formItemList.length) {
182 |           this.currentIndex = 0;
183 |         }
184 |       },
185 |       immediate: true
186 |     },
187 |     // 将表单项转为对象类型
188 |     formItemList: {
189 |       handler(list) {
190 |         this.formDesc = arrToObject(list, "field");
191 |       },
192 |       deep: true,
193 |       immediate: true
194 |     }
195 |   },
196 |   computed: {
197 |     // 结合 formPropsData 和 $attrs
198 |     formBindProps() {
199 |       return {
200 |         ...this.formPropsData,
201 |         ...this.$attrs
202 |       };
203 |     },
204 |     // 组件列表的 Map 形式
205 |     compsMap() {
206 |       return new Map(this.comps.map(comp => [comp.type, comp]));
207 |     },
208 |     // 当前表单项的 type 值
209 |     currentFormItemType() {
210 |       return this.formItemList[this.currentIndex]?.type;
211 |     },
212 |     // 当前表单项对应的组件的配置
213 |     currentCompConfig() {
214 |       if (!this.currentFormItemType) return null;
215 |       return this.getCompByType(this.currentFormItemType);
216 |     },
217 |     // 排序后的组件
218 |     sortedComps() {
219 |       return cloneDeep(this.comps)
220 |         .map(item => {
221 |           item.sort = item.sort || 6;
222 |           return item;
223 |         })
224 |         .sort((a, b) => a.sort - b.sort);
225 |     }
226 |   },
227 |   data() {
228 |     return {
229 |       // 定义表单属性数据
230 |       formPropsData: {},
231 |       // 表单项数组形态
232 |       formItemList: [],
233 |       // 表单项对象形态
234 |       formDesc: {},
235 |       // 当前 formItem的 index 值
236 |       currentIndex: null
237 |     };
238 |   },
239 |   methods: {
240 |     // 保存数据
241 |     handleSave() {
242 |       // 根据用户传入的保存格式进行判断
243 |       if (this.saveFormat === "string") {
244 |         this.$emit("save", this.getFormConfigStr());
245 |       } else {
246 |         this.$emit("save", this.getFormConfig());
247 |       }
248 |     },
249 |     // 通过类型获取表单项
250 |     getFormItemByType(type) {
251 |       const comp = this.getCompByType(type);
252 |       return cloneDeep({
253 |         type,
254 |         ...this.formItemCommon.data,
255 |         ...(comp?.config?.common?.data || {}),
256 |         attrs: comp?.config?.attrs?.data || {}
257 |       });
258 |     },
259 |     // 通过类型获取组件
260 |     getCompByType(type) {
261 |       return this.compsMap.get(type) || {};
262 |     },
263 |     // 获取序列化后的表单配置
264 |     getFormConfigStr() {
265 |       return serialize(this.getFormConfig(), { space: 2 });
266 |     },
267 |     // 获取表单配置
268 |     getFormConfig() {
269 |       return {
270 |         // 表单属性
271 |         ...removeEmptyProps(this.formPropsData),
272 | 
273 |         // 表单项
274 |         // _.mapValues 是遍历对象的值
275 |         formDesc: _.mapValues(
276 |           this.formDesc,
277 |           // 组件属性 attrs 和表单项属性 commonAttrs
278 |           ({ type, attrs, ...commonAttrs }) => {
279 |             const res = {
280 |               type,
281 |               ...removeEmptyProps(commonAttrs)
282 |             };
283 | 
284 |             attrs = removeEmptyProps(attrs);
285 |             if (Object.keys(attrs).length) {
286 |               res.attrs = attrs;
287 |             }
288 |             return res;
289 |           }
290 |         ),
291 |         order: Object.keys(this.formDesc)
292 |       };
293 |     },
294 |     // 设置表单属性默认值
295 |     initFormPropsData() {
296 |       this.formPropsData = Object.assign(
297 |         this.formPropsData,
298 |         cloneDeep(this.formProps.data)
299 |       );
300 |     }
301 |   },
302 |   created() {
303 |     // 设置表单属性默认值
304 |     this.initFormPropsData();
305 | 
306 |     // 防止火狐拖拽打开新标签
307 |     this.ondrop = function(event) {
308 |       event.preventDefault();
309 |       event.stopPropagation();
310 |     };
311 | 
312 |     document.body.addEventListener("drop", this.ondrop);
313 |   },
314 |   beforeDestroy() {
315 |     document.body.removeEventListener("drop", this.ondrop);
316 |   }
317 | };
318 | </script>
319 | 
320 | <style lang="css">
321 | /* f-render 整体样式 */
322 | .f-render {
323 |   border: 1px solid #ebeef5;
324 |   overflow: hidden;
325 | }
326 | 
327 | /* 左侧 */
328 | .f-render-left {
329 |   width: 260px;
330 |   min-width: 130px;
331 | }
332 | 
333 | /* 中部 */
334 | .f-render-main {
335 |   flex-grow: 1;
336 |   width: 750px;
337 | }
338 | 
339 | /* 右侧 */
340 | .f-render-right {
341 |   width: 315px;
342 | }
343 | 
344 | /* 头部区域 */
345 | .f-render-header {
346 |   height: 60px;
347 |   line-height: 60px;
348 |   border-bottom: 1px solid #eeeeee;
349 | }
350 | 
351 | /* 滚动区域 */
352 | .f-render-scrollarea {
353 |   /* 减去头部的高度 */
354 |   height: calc(100% - 60px);
355 | }
356 | 
357 | /* 左右面板拖动的抓手 */
358 | .f-render > .multipane-resizer {
359 |   margin: 0;
360 |   left: 0;
361 |   position: relative;
362 |   box-sizing: border-box;
363 |   border-left: 1px solid #ebeef5;
364 |   border-right: 1px solid #ebeef5;
365 |   width: 7px;
366 | }
367 | .f-render > .multipane-resizer::before {
368 |   display: block;
369 |   content: "";
370 |   width: 1px;
371 |   height: 40px;
372 |   position: absolute;
373 |   top: 50%;
374 |   left: 50%;
375 |   margin-top: -20px;
376 |   margin-left: -1.5px;
377 |   box-sizing: border-box;
378 |   border-left: 1px solid #dcdfe6;
379 |   border-right: 1px solid #dcdfe6;
380 | }
381 | .f-render > .multipane-resizer::before::before {
382 |   border-color: #999;
383 | }
384 | 
385 | .pure-form--loading .ele-form-btns {
386 |   margin-left: 62px;
387 | }
388 | </style>
389 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # f-render | 基于 ElementUI 的表单设计器
  2 | 
  3 | [![MIT](https://img.shields.io/github/license/dream2023/f-render)](https://github.com/dream2023/f-render)
  4 | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/f-render)
  5 | ![npm](https://img.shields.io/npm/dt/f-render)
  6 | [![Netlify Status](https://api.netlify.com/api/v1/badges/4c2ddffb-26b2-4e64-8b22-25678db57483/deploy-status)](https://app.netlify.com/sites/f-render/deploys)
  7 | ![gitub pages](https://github.com/dream2023/f-render/workflows/gitub%20pages/badge.svg)
  8 | [![Star on GitHub](https://img.shields.io/github/stars/dream2023/f-render.svg?style=social)](https://github.com/dream2023/f-render/stargazers)
  9 | 
 10 | <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 11 | <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 12 | 
 13 | 
 14 | - [交流群](#%E4%BA%A4%E6%B5%81%E7%BE%A4)
 15 | - [介绍](#%E4%BB%8B%E7%BB%8D)
 16 | - [注意](#%E6%B3%A8%E6%84%8F)
 17 | - [特性](#%E7%89%B9%E6%80%A7)
 18 | - [Demo](#demo)
 19 | - [教程](#%E6%95%99%E7%A8%8B)
 20 | - [1 分钟快速接入](#1-%E5%88%86%E9%92%9F%E5%BF%AB%E9%80%9F%E6%8E%A5%E5%85%A5)
 21 |     - [第 1 步：安装](#%E7%AC%AC-1-%E6%AD%A5%E5%AE%89%E8%A3%85)
 22 |     - [第 2 步：注册](#%E7%AC%AC-2-%E6%AD%A5%E6%B3%A8%E5%86%8C)
 23 |     - [第 3 步：使用](#%E7%AC%AC-3-%E6%AD%A5%E4%BD%BF%E7%94%A8)
 24 | - [用户模式](#%E7%94%A8%E6%88%B7%E6%A8%A1%E5%BC%8F)
 25 |     - [基于 f-render 的配置](#%E5%9F%BA%E4%BA%8E-f-render-%E7%9A%84%E9%85%8D%E7%BD%AE)
 26 |     - [基于 vue-ele-form 的配置](#%E5%9F%BA%E4%BA%8E-vue-ele-form-%E7%9A%84%E9%85%8D%E7%BD%AE)
 27 | - [定制化](#%E5%AE%9A%E5%88%B6%E5%8C%96)
 28 |   - [新增官方扩展组件（以富文本扩展为例）](#%E6%96%B0%E5%A2%9E%E5%AE%98%E6%96%B9%E6%89%A9%E5%B1%95%E7%BB%84%E4%BB%B6%E4%BB%A5%E5%AF%8C%E6%96%87%E6%9C%AC%E6%89%A9%E5%B1%95%E4%B8%BA%E4%BE%8B)
 29 |     - [安装组件](#%E5%AE%89%E8%A3%85%E7%BB%84%E4%BB%B6)
 30 |     - [注册组件](#%E6%B3%A8%E5%86%8C%E7%BB%84%E4%BB%B6)
 31 |     - [配置属性](#%E9%85%8D%E7%BD%AE%E5%B1%9E%E6%80%A7)
 32 |   - [新增自定义组件](#%E6%96%B0%E5%A2%9E%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6)
 33 |     - [创建组件并全局注册](#%E5%88%9B%E5%BB%BA%E7%BB%84%E4%BB%B6%E5%B9%B6%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C)
 34 |     - [书写配置](#%E4%B9%A6%E5%86%99%E9%85%8D%E7%BD%AE)
 35 |     - [合并配置并传入](#%E5%90%88%E5%B9%B6%E9%85%8D%E7%BD%AE%E5%B9%B6%E4%BC%A0%E5%85%A5)
 36 |   - [定制化原组件配置 & 表单配置](#%E5%AE%9A%E5%88%B6%E5%8C%96%E5%8E%9F%E7%BB%84%E4%BB%B6%E9%85%8D%E7%BD%AE--%E8%A1%A8%E5%8D%95%E9%85%8D%E7%BD%AE)
 37 |   - [定制化右侧 Tabs](#%E5%AE%9A%E5%88%B6%E5%8C%96%E5%8F%B3%E4%BE%A7-tabs)
 38 |   - [样式定制化](#%E6%A0%B7%E5%BC%8F%E5%AE%9A%E5%88%B6%E5%8C%96)
 39 | - [二次开发](#%E4%BA%8C%E6%AC%A1%E5%BC%80%E5%8F%91)
 40 | - [f-render 问答集锦](#f-render-%E9%97%AE%E7%AD%94%E9%9B%86%E9%94%A6)
 41 | - [Props 说明](#props-%E8%AF%B4%E6%98%8E)
 42 | - [插槽](#%E6%8F%92%E6%A7%BD)
 43 | - [生态](#%E7%94%9F%E6%80%81)
 44 | - [特别感谢赞助者](#%E7%89%B9%E5%88%AB%E6%84%9F%E8%B0%A2%E8%B5%9E%E5%8A%A9%E8%80%85)
 45 | - [Contributors ✨](#contributors-)
 46 | 
 47 | <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 48 | 
 49 | ## 介绍
 50 | 
 51 | f-render 是基于 [vue-ele-form](https://github.com/dream2023/vue-ele-form) 开发的可视化表单设计工具, 适用于 各种流程引擎和动态表单项目，大大节省你的开发时间；
 52 | 
 53 | [![f-render 演示图](./demo.webp)](https://dream2023.gitee.io/f-render/)
 54 | 
 55 | ## 注意
 56 | 
 57 | 注意，此设计器不是独立存在的，是依托于 [vue-ele-form](https://github.com/dream2023/vue-ele-form)，在使用前请务必阅读 [vue-ele-form 的文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd)。
 58 | 
 59 | ## 特性
 60 | 
 61 | - 组件方式：以组件方式接入，1 分钟轻松接入；
 62 | - 体积小：Gzip 压缩后 `100k` 左右；
 63 | - 易扩展：可以在`不更改源码`的情况下增删改属性、组件；
 64 | 
 65 | ## Demo
 66 | 
 67 | [https://dream2023.gitee.io/f-render/](https://dream2023.gitee.io/f-render/)
 68 | 
 69 | ## 教程
 70 | 
 71 | 虽然 f-render 可以做到在不更改源码的情况下实现大量的定制化，但是依然有不少人希望能够根据公司的需求进行二次开发。
 72 | 
 73 | 所以我推出了一个从 0 实现整个项目的 [教程](https://www.lanqiao.cn/courses/2848)，如果感兴趣 f-render 的实现过程和思考，可以点击 [从 0 实现可视化表单组件](https://www.lanqiao.cn/courses/2848) 进行学习。
 74 | 
 75 | ## 1 分钟快速接入
 76 | 
 77 | #### 第 1 步：安装
 78 | 
 79 | ```bash
 80 | yarn add element-ui  # npm install element-ui -S
 81 | yarn add vue-ele-form # npm install vue-ele-form -S
 82 | yarn add f-render # npm install f-render -S
 83 | ```
 84 | 
 85 | #### 第 2 步：注册
 86 | 
 87 | ```js
 88 | // vue-ele-form 的注册可参考：https://www.yuque.com/chaojie-vjiel/vbwzgu/xl46cd
 89 | import EleForm from "vue-ele-form";
 90 | import FRender from "f-render";
 91 | import ElementUI from "element-ui";
 92 | import "element-ui/lib/theme-chalk/index.css";
 93 | 
 94 | Vue.use(ElementUI);
 95 | Vue.use(EleForm);
 96 | Vue.component("f-render", FRender);
 97 | ```
 98 | 
 99 | #### 第 3 步：使用
100 | 
101 | ```html
102 | <template>
103 |   <f-render
104 |     @save="handleSave"
105 |     :loading="loading"
106 |     height="calc(100vh - 60px)"
107 |     :config="formConfig"
108 |   />
109 | </template>
110 | 
111 | <script>
112 |   export default {
113 |     data() {
114 |       return {
115 |         loading: false,
116 |         formConfig: {}
117 |       };
118 |     },
119 |     methods: {
120 |       handleSave(res) {
121 |         // 这里是保存到 localStorage，你可以保存到服务器
122 |         localStorage.setItem("form-config", res);
123 |         this.$message.success("保存成功啦~");
124 |       }
125 |     },
126 |     mounted() {
127 |       // 模拟异步加载
128 |       this.loading = true;
129 |       setTimeout(() => {
130 |         this.loading = false;
131 |         this.formConfig = localStorage.getItem("form-config") || "";
132 |       }, 1000);
133 |     }
134 |   };
135 | </script>
136 | ```
137 | 
138 | ## 用户模式
139 | 
140 | 我们把动态表单分为两个阶段：
141 | 
142 | - 首先是设计阶段：通过拖拽设计表单；
143 | - 然后是用户阶段：将设计好的表单以纯表单的形式让用户填写。
144 | 
145 | 我们别分称这两个阶段的表单为设计模式和用户模式。设计模式的表单配置我们已经讲了，下面看用户模式下的表单配置：
146 | 
147 | #### 基于 f-render 的配置
148 | 
149 | 通过属性 `pure`, 可以直接做为表单使用，其数据提交方式同 `vue-ele-form` 一样，具体可查看[文档](https://www.yuque.com/chaojie-vjiel/vbwzgu/zbu9mn)。
150 | 
151 | ```html
152 | <template>
153 |   <f-render
154 |     v-model="formData"
155 |     :request-fn="handleSubmit"
156 |     @request-success="handleSuccess"
157 |     :config="formConfig"
158 |     pure
159 |   />
160 | </template>
161 | 
162 | <script>
163 |   export default {
164 |     data() {
165 |       return {
166 |         formData: {},
167 |         formConfig: ""
168 |       };
169 |     },
170 |     methods: {
171 |       handleSubmit(data) {
172 |         // eslint-disable-next-line no-console
173 |         console.log(data);
174 |         return Promise.resolve();
175 |       },
176 |       handleSuccess() {
177 |         this.$message.success("创建成功");
178 |       }
179 |     },
180 |     mounted() {
181 |       // 模拟异步加载
182 |       this.loading = true;
183 |       setTimeout(() => {
184 |         this.loading = false;
185 |         this.formConfig = localStorage.getItem("form-config") || "";
186 |       }, 1000);
187 |     }
188 |   };
189 | </script>
190 | ```
191 | 
192 | #### 基于 vue-ele-form 的配置
193 | 
194 | 如果你的可视化设计和表单使用，不再一个系统，可以直接使用 `vue-ele-form`，不必安装 `f-render`，具体如下：
195 | 
196 | ```html
197 | <template>
198 |   <ele-form
199 |     v-model="formData"
200 |     :request-fn="handleSubmit"
201 |     @request-success="handleSuccess"
202 |     v-if="formConfig"
203 |     v-bind="formConfig"
204 |   />
205 | </template>
206 | 
207 | <script>
208 |   export default {
209 |     data() {
210 |       return {
211 |         formData: {},
212 |         formConfig: null
213 |       };
214 |     },
215 |     methods: {
216 |       handleSubmit(data) {
217 |         // eslint-disable-next-line no-console
218 |         console.log(data);
219 |         return Promise.resolve();
220 |       },
221 |       handleSuccess() {
222 |         this.$message.success("创建成功");
223 |       }
224 |     },
225 |     mounted() {
226 |       // 模拟异步加载
227 |       setTimeout(() => {
228 |         try {
229 |           // 这里必须对字符串进行反序列化
230 |           this.formConfig = eval(`(${localStorage.getItem("form-config")})`);
231 |         } catch {
232 |           this.$message.error("数据解析失败");
233 |         }
234 |       }, 1000);
235 |     }
236 |   };
237 | </script>
238 | ```
239 | 
240 | ## 定制化
241 | 
242 | ### 新增官方扩展组件（以富文本扩展为例）
243 | 
244 | #### 安装组件
245 | 
246 | ```bash
247 | yarn add vue-ele-form-quill-editor
248 | ```
249 | 
250 | #### 注册组件
251 | 
252 | ```js
253 | Vue.component("quill-editor", EleFormQuillEditor);
254 | ```
255 | 
256 | #### 配置属性
257 | 
258 | ```html
259 | <template>
260 |   <!-- 省略其它属性 -->
261 |   <f-render :comps="comps" />
262 | </template>
263 | 
264 | <script>
265 |   // 默认配置
266 |   import comps from "f-render/src/fixtures/comps";
267 |   // 富文本配置
268 |   import quillEditor from "f-render/src/fixtures/extends/quill-editor";
269 |   // 可以更改显示组件位置，默认为 10
270 |   // 这里更改为 2，显示更靠前
271 |   quillEditor.sort = 2;
272 | 
273 |   export default {
274 |     data() {
275 |       return {
276 |         // 拼接上即可
277 |         comps: comps.concat(quillEditor)
278 |       };
279 |     }
280 |   };
281 | </script>
282 | ```
283 | 
284 | ### 新增自定义组件
285 | 
286 | #### 创建组件并全局注册
287 | 
288 | 需要根据 vue-ele-form 文档[创建自定义组件](https://www.yuque.com/chaojie-vjiel/vbwzgu/ugumna)，并注册。
289 | 
290 | #### 书写配置
291 | 
292 | 你可以参考[源码中的配置]('./src/fixtures/comps.js')，一下是范例和属性说明：
293 | 
294 | ```js
295 | // custom-url.js
296 | export default {
297 |   // 假如这个组件叫 url（必填）
298 |   type: "custom-url",
299 |   // 默认标签名（必填）
300 |   label: "URL",
301 |   // 用于排序，值越小，越靠前
302 |   sort: 1,
303 |   // 属性配置
304 |   config: {
305 |     // 属性配置说明地址（可省略）
306 |     url: "https://www.xxx.com",
307 |     // 组件属性配置（不知道啥是组件属性，可以看一下界面右侧）
308 |     attrs: {
309 |       // config 配置 参考 FormDesc:
310 |       // https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#KOPkD
311 |       config: {
312 |         // max 为属性名
313 |         max: {
314 |           type: "number",
315 |           label: "最大输入长度"
316 |         },
317 |         name: {
318 |           type: "input",
319 |           label: "原生 name",
320 |           // 必填
321 |           required: true
322 |         }
323 |         // ....
324 |       },
325 |       // 默认值，如果在配置文件里设置了，则每个组件都会携带
326 |       data: {
327 |         name: "url"
328 |       }
329 |     },
330 |     // 表单项配置，是 FormDesc 中非 attrs 的其它配置，
331 |     // 具体可看：https://www.yuque.com/chaojie-vjiel/vbwzgu/iw5dzf#hl4pm
332 |     common: {
333 |       config: {
334 |         // 默认值
335 |         default: {
336 |           type: "input",
337 |           label: "默认值"
338 |         }
339 |       },
340 |       data: {}
341 |     }
342 |   }
343 | };
344 | ```
345 | 
346 | #### 合并配置并传入
347 | 
348 | ```html
349 | <template>
350 |   <!-- 省略其它属性 -->
351 |   <f-render :comps="comps" />
352 | </template>
353 | 
354 | <script>
355 |   import comps from "f-render/src/fixtures/comps";
356 |   import customUrl from "some/path/custom-url";
357 |   export default {
358 |     data() {
359 |       return {
360 |         comps: comps.concat(customUrl)
361 |       };
362 |     }
363 |   };
364 | </script>
365 | ```
366 | 
367 | ### 定制化原组件配置 & 表单配置
368 | 
369 | - 组件配置目录：`f-render/src/fixtures/comps.js`
370 | - 表单配置目录：`f-render/src/fixtures/form-props.js`
371 | - 表单项通用属性配置：`f-render/src/fixtures/form-item-common.js`
372 | - 扩展组件目录：`f-render/src/fixtures/extends/[扩展组件名].js`
373 | 
374 | 如果你想修改组件属性或者表单的属性，减少或者增加组件，可以将上述文件`拷贝到自己的项目`目录，参考上述配置说明，进行更改，并传入即可：
375 | 
376 | ```html
377 | <!-- formProps 是表单属性 -->
378 | <!-- comps 是组件列表和属性 -->
379 | <!-- formItemCommon 是表单项通用属性配置 -->
380 | <f-render
381 |   :form-props="formProps"
382 |   :comps="comps"
383 |   :form-item-common="formItemCommon"
384 | />
385 | ```
386 | 
387 | 具体而言，如果想让每个 `input` 组件都携带 `clearable: true` 的属性，我们可以这样操作：
388 | 
389 | ```html
390 | <template>
391 |   <!-- 其它属性省略 -->
392 |   <!-- 将更改后的 comps 传递过去即可 -->
393 |   <f-render :comps="comps" />
394 | </template>
395 | 
396 | <script>
397 |   import comps from "f-render/src/fixtures/comps";
398 |   // 查找 input 组件，当然你也可以看源码，直接查看索引
399 |   const inputIndex = comps.findIndex(item => item.type === "input");
400 |   // 更改 config.attrs.data 值即可
401 |   comps[inputIndex].config.attrs.data = { clearable: true };
402 | 
403 |   export default {
404 |     data() {
405 |       return {
406 |         comps
407 |       };
408 |     }
409 |   };
410 | </script>
411 | ```
412 | 
413 | ### 定制化右侧 Tabs
414 | 
415 | 我们可以通过 `isShowRight` 属性来控制右侧面板是否显示，通过 `rightTabs` 来定制具体显示的面板名称，具体如下：
416 | 
417 | ```html
418 | <template>
419 |   <!-- 定制化右侧 tabs -->
420 |   <f-render :right-tabs="tabs" />
421 | </template>
422 | 
423 | <script>
424 |   export default {
425 |     data() {
426 |       return {
427 |         tabs: [
428 |           { label: "表单项属性配置", name: "form-item-common" },
429 |           { label: "组件属性配置", name: "form-item-attrs" }
430 |           // 注释下面的内容，就可以不显示
431 |           // { label: "表单配置", name: "form-props" }
432 |         ]
433 |       };
434 |     }
435 |   };
436 | </script>
437 | ```
438 | 
439 | ### 样式定制化
440 | 
441 | 直接进行样式覆盖即可，注意不要加 `scoped`，否则覆盖不成功
442 | 
443 | ## 二次开发
444 | 
445 | 如果仅通过`属性`和`样式`定制化已无法满足的你和你产品经理的要求，那就需要进行定制化开发，我个人觉得代码整体还是非常简单的，你可以 `clone` 代码或者下载后（建议用[gitee](https://gitee.com/dream2023/f-render)），进行相应的更改，更改后有两种处理方式:
446 | 
447 | - 直接放到项目目录里，并将安装 `dependencies` 的依赖复制到项目，进行开发即可；
448 | - 直接开发，然后发布到公司[私服](https://www.npmjs.com/package/verdaccio)，如果是开源，则可以发到 GitHub 或者 gitee，然后安装自己的即可
449 | 
450 | 具体的细节，开头提的[教程](https://www.lanqiao.cn/courses/2848)里会有详细的过程，希望大家可以支持一下。
451 | 
452 | ## f-render 问答集锦
453 | 
454 | - [1、f-render 不能做什么？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#0nlfc)
455 | - [2、怎么实现 options URL 配置？](https://www.yuque.com/chaojie-vjiel/vbwzgu/adz8q8#gvS8c)
456 | 
457 | ## Props 说明
458 | 
459 | ```js
460 | props: {
461 |   // 表单内容
462 |   config: {
463 |     type: [Object, String],
464 |     required: true
465 |   },
466 |   // 设计器整体高度
467 |   height: {
468 |     type: [String, Number],
469 |     default: "400px"
470 |   },
471 |   // 保存格式
472 |   saveFormat: {
473 |     type: String,
474 |     default: "string",
475 |     validator(val) {
476 |       return ["object", "string"].includes(val);
477 |     }
478 |   },
479 |   // 是否纯净（用于显示表单）
480 |   pure: Boolean,
481 |   // 表单配置
482 |   formProps: {
483 |     type: Object,
484 |     default: () => formProps
485 |   },
486 |   // 表单项配置
487 |   formItemCommon: {
488 |     type: Object,
489 |     default: () => formItemCommonDefault
490 |   },
491 |   // 组件列表
492 |   comps: {
493 |     type: Array,
494 |     default: () => comps
495 |   },
496 |   // 操作配置
497 |   operations: {
498 |     type: Array,
499 |     default: () => ["preview", "data", "code", "batch", "clear", "save"]
500 |   },
501 |   // 是否显示右侧
502 |   isShowRight: {
503 |     type: Boolean,
504 |     default: true
505 |   },
506 |   // 右侧属性面板 Tabs
507 |   rightTabs: {
508 |     type: Array,
509 |     default: () => [
510 |       { label: "表单项属性配置", name: "form-item-common" },
511 |       { label: "组件属性配置", name: "form-item-attrs" },
512 |       { label: "表单配置", name: "form-props" }
513 |     ]
514 |   },
515 |   // 是否在加载
516 |   loading: Boolean,
517 | 
518 |   // 表单相关（pure 为 true 时）, 同 vue-ele-form
519 |   // https://www.yuque.com/chaojie-vjiel/vbwzgu/dyw8a7
520 |   requestFn: Function,
521 |   isLoading: Boolean,
522 |   formError: Object,
523 |   // ....
524 | },
525 | ```
526 | 
527 | ## 插槽
528 | 
529 | - left：左侧组件列表
530 | - main: 中间区域
531 | - main-header: 头部操作区
532 | - main-content: 表单设计区
533 | - right: 右侧属性配置区
534 | 
535 | 举例：
536 | 
537 | ```html
538 | <template>
539 |   <f-render>
540 |     <!-- 左侧插槽 -->
541 |     <template v-slot:left="{frender}">
542 |       <div>
543 |         <div>left</div>
544 |         <div>{{frender.comps}}</div>
545 |       </div>
546 |     </template>
547 |   </f-render>
548 |   <template></template
549 | ></template>
550 | ```
551 | 
552 | 其中 `frender` 数据是 `f-render` 组件数据的集合，具体都有哪些数据，可以参考[源码](https://gitee.com/dream2023/f-render/blob/master/src/f-render.vue)，其它插槽均有此参数。
553 | 
554 | ## 生态
555 | 
556 | | Project                                                                                   | Status                                                                                                                         | Description                                |
557 | | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------ |
558 | | [vue-ele-form](https://github.com/dream2023/vue-ele-form)                                 | [![npm](https://img.shields.io/npm/v/vue-ele-form)](https://github.com/dream2023/vue-ele-form)                                 | 接基于 ElementUI 的数据驱动表单            |
559 | | [f-render](https://github.com/dream2023/f-render)                                         | [![npm](https://img.shields.io/npm/v/f-render)](https://github.com/dream2023/f-render)                                         | 专为 vue-ele-form 开发的可视化表单设计工具 |
560 | | [vue-ele-form-json-editor](https://github.com/dream2023/vue-ele-form-json-editor)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-json-editor)](https://github.com/dream2023/vue-ele-form-json-editor)         | JSON 编辑器(vue-ele-form 扩展)             |
561 | | [vue-ele-form-upload-file](https://github.com/dream2023/vue-ele-form-upload-file)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-upload-file)](https://github.com/dream2023/vue-ele-form-upload-file)         | upload 文件上传组件(vue-ele-form 扩展)     |
562 | | [vue-ele-form-image-uploader](https://github.com/dream2023/vue-ele-form-image-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-image-uploader)](https://github.com/dream2023/vue-ele-form-image-uploader)   | 上传图片增强组件(vue-ele-form 扩展)        |
563 | | [vue-ele-form-tree-select](https://github.com/dream2023/vue-ele-form-tree-select)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-tree-select)](https://github.com/dream2023/vue-ele-form-tree-select)         | 树形选择框组件(vue-ele-form 扩展)          |
564 | | [vue-ele-form-table-editor](https://github.com/dream2023/vue-ele-form-table-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-table-editor)](https://github.com/dream2023/vue-ele-form-table-editor)       | 表格编辑器(vue-ele-form 扩展)              |
565 | | [vue-ele-form-dynamic](https://github.com/dream2023/vue-ele-form-dynamic)                 | [![npm](https://img.shields.io/npm/v/vue-ele-form-dynamic)](https://github.com/dream2023/vue-ele-form-dynamic)                 | 动态表单(vue-ele-form 扩展)                |
566 | | [vue-ele-form-video-uploader](https://github.com/dream2023/vue-ele-form-video-uploader)   | [![npm](https://img.shields.io/npm/v/vue-ele-form-video-uploader)](https://github.com/dream2023/vue-ele-form-video-uploader)   | 上传视频增强组件(vue-ele-form 扩展)        |
567 | | [vue-ele-form-quill-editor](https://github.com/dream2023/vue-ele-form-quill-editor)       | [![npm](https://img.shields.io/npm/v/vue-ele-form-quill-editor)](https://github.com/dream2023/vue-ele-form-quill-editor)       | 富文本编辑器(vue-ele-form 扩展)            |
568 | | [vue-ele-form-markdown-editor](https://github.com/dream2023/vue-ele-form-markdown-editor) | [![npm](https://img.shields.io/npm/v/vue-ele-form-markdown-editor)](https://github.com/dream2023/vue-ele-form-markdown-editor) | markdown 编辑器(vue-ele-form 扩展)         |
569 | | [vue-ele-form-bmap](https://github.com/dream2023/vue-ele-form-bmap)                       | [![npm](https://img.shields.io/npm/v/vue-ele-form-bmap)](https://github.com/dream2023/vue-ele-form-bmap)                       | 百度地图组件(vue-ele-form 扩展)            |
570 | | [vue-ele-form-codemirror](https://github.com/dream2023/vue-ele-form-codemirror)           | [![npm](https://img.shields.io/npm/v/vue-ele-form-codemirror)](https://github.com/dream2023/vue-ele-form-codemirror)           | 代码编辑器(vue-ele-form-gallery 扩展)      |
571 | | [vue-ele-form-gallery](https://github.com/dream2023/vue-ele-form-gallery)                 | [![npm](https://img.shields.io/npm/v/vue-ele-form-gallery)](https://github.com/dream2023/vue-ele-form-gallery)                 | 图片/视频展示组件(vue-ele-form 扩展)       |
572 | | [vue-ele-form-data-editor](https://github.com/dream2023/vue-ele-form-data-editor)         | [![npm](https://img.shields.io/npm/v/vue-ele-form-data-editor)](https://github.com/dream2023/vue-ele-form-data-editor)         | 轻量级数据编辑器(vue-ele-form 扩展)        |
573 | 
574 | <h2 align="center">特别感谢赞助者</h2>
575 | <!--platinum start-->
576 | <table>
577 |   <tbody>
578 |     <tr>
579 |       <td align="center" valign="middle">
580 |         <a href="http://www.youkefu.cn" target="_blank">
581 |           <img width="200px" src="https://portrait.gitee.com/uploads/avatars/user/400/1200081_ukewo_admin_1578945969.png">
582 |           <div>优客服</div>
583 |         </a>
584 |       </td>
585 |       <td align="center" valign="middle">
586 |         <a href="http://www.sagedoit.com/" target="_blank">
587 |           <img width="200px" src="https://i.loli.net/2020/02/10/capiUTAPgCWvLkM.png">
588 |           <div>圣捷远创</div>
589 |         </a>
590 |       </td>
591 |       <td align="center" valign="middle">
592 |         <a href="https://github.com/DamonNie" target="_blank">
593 |           <img width="200px" src="https://avatars2.githubusercontent.com/u/16314117?s=460&v=4">
594 |           <div>damonnie</div>
595 |         </a>
596 |       </td>
597 |       <td align="center" valign="middle">
598 |         <a href="https://github.com/xzusoft" target="_blank">
599 |           <img width="200px" src="https://avatars3.githubusercontent.com/u/12249515?s=460&v=4">
600 |           <div>xzusoft</div>
601 |         </a>
602 |       </td>
603 |       <td align="center" valign="middle">
604 |         <a href="https://gitee.com/ahiris_seeenter" target="_blank">
605 |           <img width="200px" src="https://portrait.gitee.com/uploads/avatars/user/751/2253945_ahiris_seeenter_1597720904.png!avatar200">
606 |           <div>seeenter</div>
607 |         </a>
608 |       </td>
609 |       <td align="center" valign="middle">
610 |         <a href="" target="_blank">
611 |           <img width="200px" src="https://s1.ax1x.com/2020/08/19/d1XV9x.jpg">
612 |           <div>高亢</div>
613 |         </a>
614 |       </td>
615 |     </tr><tr></tr>
616 |   </tbody>
617 | </table>
618 | <!--platinum end-->
619 | 
620 | > 如果您觉得对您有所帮助, 可以请作者喝一杯咖啡, 让开源走的更远, 点击进入[码云赞赏](https://gitee.com/dream2023/f-render)一下, 并加入下面交流群, 将链接发送给我
621 | 
622 | ## Contributors ✨
623 | 
624 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
625 | 
626 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
627 | <!-- prettier-ignore-start -->
628 | <!-- markdownlint-disable -->
629 | <table>
630 |   <tr>
631 |     <td align="center"><a href="http://dream2023.github.io"><img src="https://avatars0.githubusercontent.com/u/19297757?v=4" width="100px;" alt=""/><br /><sub><b>张超杰</b></sub></a><br /><a href="https://github.com/dream2023/f-render/commits?author=dream2023" title="Documentation">📖</a> <a href="https://github.com/dream2023/f-render/commits?author=dream2023" title="Code">💻</a> <a href="#ideas-dream2023" title="Ideas, Planning, & Feedback">🤔</a></td>
632 |     <td align="center"><a href="https://github.com/Wisenl"><img src="https://avatars0.githubusercontent.com/u/17942052?v=4" width="100px;" alt=""/><br /><sub><b>Wisen</b></sub></a><br /><a href="https://github.com/dream2023/f-render/commits?author=Wisenl" title="Code">💻</a></td>
633 |     <td align="center"><a href="https://github.com/IWANABETHATGUY"><img src="https://avatars1.githubusercontent.com/u/17974631?v=4" width="100px;" alt=""/><br /><sub><b>IWANABETHATGUY</b></sub></a><br /><a href="https://github.com/dream2023/f-render/commits?author=IWANABETHATGUY" title="Code">💻</a></td>
634 |   </tr>
635 | </table>
636 | 
637 | <!-- markdownlint-enable -->
638 | <!-- prettier-ignore-end -->
639 | 
640 | <!-- ALL-CONTRIBUTORS-LIST:END -->
641 | 
642 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
643 | 


--------------------------------------------------------------------------------