Example code for vue to implement visualization of drag-and-drop custom forms

Implements the visual drag-and-drop form function as shown in the example. The entire page is divided into three columns with left, middle and right layouts. The components (components) of the component library in the left column are used as keys. When dragging and dropping into the middle area, store array data in vuex, and dragging one and push one. When clicking on a component, its properties are displayed in the right column, which is actually to look for data iteration properties in the data stored in vuex.

Three columns left, center and right, fixed left and right, adaptive layout in the middle

First of all, in terms of layout, both left and right can be stretched, and the middle is an adaptive layout.

Float left and float right respectively. Use margin to open the layout in the middle bar to complete the layout

Dynamically zoom the browser window to view the effect

Dynamic display template

The second important point is to make template programmable.

For example: A string <el-button> button</el-button> is sent, how to display it as a component instead of a string label.

Key points: Use js and vue extends

Create new js

export default ('CustomTemplate', {
  props: {
    html: String
  },
  render (h) {
   return h(({ // Key points     template: `<div class="root-custom-template">${}</div>`,
     data () {
      return {
       current: ''
      }
     },
     methods: {
      doclick (uuid, id) {
        = uuid
       this.$('EditPanel/changeId', uuid)
      },
      dodragstart (ev) {
        = 'move'
      }
     }
  }))
 },
})

Drag and drop operations and data assembly

It has been analyzed at the beginning of the article. The flow of the entire data is then implemented using vuex.

When drag and drop components are completed, considering the characteristics of MVVM, the screen changes <=> data changes. Please be careful not to modify the state directly when operating vuex.

computed: {
  myList: {
    get() {
      return this.$
    },
    set(value) {
      this.$('updateList', value)
    }
  }
}

The entire data flow direction: The left column component library <-->middle display bar <--->right column property settings. If the data is not controlled well, the original data may be modified. Please see:

var a = { k: 1 }
var b = a
 = 2
(a) // { k: 2 }

This will inadvertently lead to the data being modified and it is difficult to troubleshoot. You can use frozen objects to avoid errors.

function deepFreeze(obj) {

 // Retrieve the attribute name defined on obj var propNames = (obj);

 // Freeze the attributes before freezing itself (function(name) {
  var prop = obj[name];

  // If prop is an object, freeze it  if (typeof prop == 'object' && prop !== null)
   deepFreeze(prop);
 });

 // Freeze yourself (no-op if already frozen) return (obj);
}

demo project github

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.