Today I’m going to show you an element Form that can be rewrapped and made into a drag-and-drop form

Most of the features are complete at this stage, and more components will be added later

First take a look at the page

The project is based on zX-lib with Element UI rewrapped

So let’s talk about zx-lib

  • Zx-lib rewraps element UI’s form form and table component, now uploaded to NPM
  • You can use it online
  • Usage:
  • npm i zx-lib -S
  • In the main. Js references
  • import zxLib from ‘zx-lib’
  • Vue.use(zxLib)

Remember that you’ve already referenced Element UI

The following components are now encapsulated in the component, and other components will be added gradually ZxForm slot, according to their own needs to add their own required components

  • ZxForm is built in to change all click events through
this.$emit('event', params) 
Copy the code

Go back to the main page

  • Type Indicates the event type
  • Prop represents that field change
  • Value indicates the changed value
  • Data contains all the values in the form

Two prop values are built into the form to represent submission and reset The submission takes the form of a Promise, which can be used if you write your own submission verification

Promise. All ([this. $refs. MForm. Submit (), enclosing $refs. MForm1. Submit ()]), then (datas = > {the console. The log (" submitted at the same time -- - > ", 'Verification successful ')})Copy the code

Also please give a little star

Now let’s talk about form drag and drop

Form drag and drop is implemented using VueDraggable

Work with ZX-Lib to implement drag-and-drop forms

Drag-and-drop forms are now available for JSON data import/export replication, vue file export and online preview. Forms can be drag-and-drop sorted and deleted by double-clicking

More introduction welcome to view the source code

The source address

Project online experience address