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

  1. 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

  2. CDN’s introduction of Ant-design-Vue needs to introduce the moment itself.

  3. 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 😜😜😜.