Since I am going to make a dynamic workflow system recently, I need to use the function of custom forms. However, as my own project is developed based on VUe3.0, the existing custom forms on the market are not supported. Think about it, or do one of their own, behind the scalability is relatively strong. So referring to the current market most of the functions of custom forms, made a vue3.0 + TS based on the custom form plug-in. Support for ant-Design-Vue and Element-Plus UI libraries. Just finished the first version, do a simple introduction, we have the need to take directly to use.
vue-form-create
Custom form generator based on Vue3.0 + TS. Supports NPM and CDN import. The UI library supports Ant-design-vue and Element-Plus.
Support functions
- Remote data acquisition
- Image upload
- Rich text editor
- Grid layout
- Generate a JSON
- The generated code
Demo address (Github)
Fuchengwei. Making. IO/vue – form – cr…
Demo Address (Gitee)
Fuchengwei. Gitee. IO/vue – form – cr…
github
Github.com/fuchengwei/…
npm
www.npmjs.com/package/vue…
1 installation
Install using NPM or YARN
We recommend using NPM or YARN for development. It is easy to debug in the development environment and can be packaged and deployed in the production environment to enjoy the benefits of the entire ecosystem and tool chain.
$npm install vue-form-create --save
Copy the code
$yarn add vue-form-create
Copy the code
Browser introduction
Import the file directly in the browser using the script tag, and use the global variable formCreate.
We provide formcreate.common.js formcreate.umd.js formcreate.umd.min.js in vue-form-create/dist in the NPM distribution. You can download it through UNPKG.
<script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
Copy the code
Pay attention to
-
Either NPM or CDN introduction needs to introduce Ant-design-vue or element-Plus globally. And the project relies on ACEJS and needs to be introduced globally using CDN.
<script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script>
Copy the code -
CDN’s introduction of Ant-design-Vue needs to introduce the moment itself.
-
You can use components directly within components if you don’t want to install them globally.
import { AntdDesignForm, ElDesignForm, AntdGenerateForm, ElGenerateForm } from 'vue-form-create'
Copy the code
The sample
NPM into
import { createApp } from 'vue'
import antd from 'ant-design-vue'
import App from './App.vue'
import DesignForm from 'vue-form-create'
import 'ant-design-vue/dist/antd.css'
createApp(App)
.use(antd)
.use(DesignForm)
.mount('#app')
Copy the code
Browser introduction
<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<link
rel="stylesheet"
href="https://unpkg.com/ant-design-vue@next/dist/antd.min.css"
/>
</head>
<body>
<div id="app">
<antd-design-form />
</div>
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-form-create/dist/formCreate.umd.min.js"></script>
<script src="https://unpkg.com/ace-builds/src-noconflict/ace.js"></script>
<script src="https://unpkg.com/moment/moment.js"></script>
<script src="https://unpkg.com/ant-design-vue@next/dist/antd.min.js"></script>
<script>
const { createApp, reactive, toRefs } = Vue
createApp({})
.use(antd)
.use(formCreate)
.mount('#app')
</script>
</body>
</html>
Copy the code
2 Component Description
Form designer (AntdDesignForm)
The sample
<template>
<AntdDesignForm ref="designForm" />
</template>
Copy the code
API
Props
parameter | instructions | type | The default value |
---|---|---|---|
preview | Designer previews action buttons | boolean | true |
generateCode | The designer generates code buttons | boolean | true |
generateJson | The designer generates Json buttons | boolean | true |
uploadJson | The designer imports the JSON button | boolean | true |
clearable | The designer empty button | boolean | true |
basicFields | Left base field configuration of designer | array | – |
advanceFields | Advanced field configuration to the left of the designer | array | – |
layoutFields | Layout field configuration on the left side of the designer | array | – |
methods
Ref lets you get the instance and call the instance method
The method name | instructions | parameter |
---|---|---|
getJson() | Gets JSON data for the designer configuration | – |
setJson(value) | Sets the configuration information for the designer | Data obtained via getJson |
clear() | Empty designer | |
getTemplate(type) | Gets ready-to-use code generated by the designer | The type of type is ‘vue’ or ‘HTML’ |
Fields that
basicFields
type | The field name |
---|---|
input | Single-line text |
password | The password |
textarea | Multiline text |
number | counter |
radio | Radio button group |
checkbox | Checkboxes group |
time | Time selector |
date | Date picker |
rate | score |
select | Drop down selection box |
switch | switch |
slider | The slider |
text | The text |
Advanced Fields (Advanced Fields)
type | The field name |
---|---|
img-upload | The picture |
richtext-editor | Rich text editor |
cascader | Cascade selector |
layoutFields
type | The field name |
---|---|
grid | Grid layout |
Form Generator (AntdGenerateForm)
The sample
<template>
<AntdGenerateForm ref="generateForm" />
</template>
Copy the code
API
Props
parameter | instructions | type | The default value |
---|---|---|---|
data | Form JSON configuration data (JSON retrieved from the form designer) | object | – |
value | Form data (value retrieved from form generator) | object | – |
methods
Ref lets you get the instance and call the instance method
The method name | instructions | parameter |
---|---|---|
getData() | Get form data (return Promise) | – |
reset() | Resetting form data | Data obtained via getJson |
3 Function Description
The remote data
Select items such as single box, multiple box, drop-down box, and cascade selector need to be generated using data. In this case, you can configure remote data.
Sets the remote method address and return value.
File upload
Enter the server upload address and parameter name.
4 Follow-up Planning
Currently in the first version of V1.0.0, additional functionality and layout components are expected, as well as mobile support. For the mobile terminal do not know that we use the UI library more, you can tell me in the following message, I will give priority to support.
Finally, if you think it is good and useful, please give a Star 😜😜😜.