vue實現可視化可拖放的自定義表單

實現如例子所示的可視化可拖放表單功能。整個頁面，分爲左中右三欄佈局，左欄的部件庫的部件（組件）做爲key,拖放到中間區域時，往vuex存放數組數據，拖一個就push一個。點擊某個組件時，在右欄顯示其屬性，其實也就是在vuex存放的數據中查找數據迭代屬性。

左中右三欄 左右固定 中間自適應佈局

首先，佈局上來看，左右都是能夠拉伸的，中間是自適應的佈局。

左右分別 float left和 float right, 中間欄使用 margin撐開佈局，便可完成佈局

動態縮放瀏覽器窗口來查看效果

動態顯示template

第二個重要點就是讓template可編程,
例如： 傳來一個字符串<el-button>按鈕</el-button>,如何顯示成爲組件而不是字符串標籤呢。

關鍵點： 使用js和vue extends

新建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'
            }
          }
    }))
  },
})

拖放操做和數據的組裝

在文章開頭已經分析好了，整個數據的流向，接下來就是用vuex去實現。

拖放組件使用vuedraggable,拖放完成的時候，鑑於MVVM的特色，畫面改變<=>數據改變，操做vuex時注意不能直接修改state

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

整個數據流向： 左欄組件庫<-->中間展現欄 <---->右欄屬性設置, 控制很差數據的話，可能會出現原始數據被修改的狀況。請看：

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

這就會無心間致使數據被修改，很難排查。能夠使用Object.freeze凍結對象，避免出錯。

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);
}

demo項目github