Vue implements visual drag-and-drop custom forms (code example)

What this article brings to you is about the implementation of visual drag-and-drop custom forms (code examples) in Vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Implement the visual drag-and-drop form function as shown in the example. The entire page is divided into three columns: left, middle and right. The components (components) of the component library in the left column are used as keys. When dragging and dropping into the middle area, array data is stored in vuex, and one is pushed after dragging one. When a component is clicked, its properties are displayed in the right column. In fact, it is to find the data iteration properties in the data stored in vuex.

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

First of all, from the layout point of view, the left and right can be stretched, and the middle is an adaptive layout.

Float left and float right respectively, use margin to open the middle column to complete the layout

Dynamicly zoom the browser window to see the effect

Dynamic display template

The second important point is to make the template programmable.
For example: if a string button is passed, how to display it as a component instead of a string label? Woolen cloth.

Key points: Using js and vue extends

New js

export default Vue.component('CustomTemplate', {
    props: {
        html: String
    },
    render (h) {
      return h(Vue.extend({ // 关键点
          template: `<div class="root-custom-template">${this.html}</div>`,
          data () {
            return {
              current: ''
            }
          },
          methods: {
            doclick (uuid, id) {
              this.current = uuid
              this.$store.commit('EditPanel/changeId', uuid)
            },
            dodragstart (ev) {
              ev.dropEffect = 'move'
            }
          }
    }))
  },
})

Drag-and-drop operation and data assembly

It has been analyzed at the beginning of the article. The next step is to use vuex to implement the entire data flow.

The drag and drop component uses vuedraggable. When the drag and drop is completed, in view of the characteristics of MVVM, the screen changes<=>the data changes. When operating vuex, be careful not to directly modify the state

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

The entire data Flow direction: Left column component library<--> Middle display column<----> Right column property settings. If the data is not well controlled, the original data may be modified. Please see:

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

This will unintentionally cause the data to be modified, which is difficult totroubleshoot. You can use Object.freeze to freeze objects to avoid errors.

Object.freeze

function deepFreeze(obj) {

  // 取回定义在obj上的属性名
  var propNames = Object.getOwnPropertyNames(obj);

  // 在冻结自身之前冻结属性
  propNames.forEach(function(name) {
    var prop = obj[name];

    // 如果prop是个对象，冻结它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // 冻结自身(no-op if already frozen)
  return Object.freeze(obj);
}

This article has ended here. For more exciting content, you can pay attention to the JavaScript Tutorial Video column of the PHP Chinese website!

The above is the detailed content of Vue implements visual drag-and-drop custom forms (code example). For more information, please follow other related articles on the PHP Chinese website!