這篇文章將為大家詳細(xì)講解有關(guān)vue如何實(shí)現(xiàn)可視化可拖放的自定義表單，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專業(yè)為企業(yè)提供鎮(zhèn)巴網(wǎng)站建設(shè)、鎮(zhèn)巴做網(wǎng)站、鎮(zhèn)巴網(wǎng)站設(shè)計(jì)、鎮(zhèn)巴網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)與制作、鎮(zhèn)巴企業(yè)網(wǎng)站模板建站服務(wù)，10年鎮(zhèn)巴做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

實(shí)現(xiàn)如例子所示的可視化可拖放表單功能。整個(gè)頁(yè)面，分為左中右三欄布局，左欄的部件庫(kù)的部件（組件）作為key,拖放到中間區(qū)域時(shí)，往vuex存放數(shù)組數(shù)據(jù)，拖一個(gè)就push一個(gè)。點(diǎn)擊某個(gè)組件時(shí)，在右欄顯示其屬性，其實(shí)也就是在vuex存放的數(shù)據(jù)中查找數(shù)據(jù)迭代屬性。

左中右三欄 左右固定 中間自適應(yīng)布局

首先，布局上來(lái)看，左右都是可以拉伸的，中間是自適應(yīng)的布局。

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

動(dòng)態(tài)縮放瀏覽器窗口來(lái)查看效果

動(dòng)態(tài)顯示template

第二個(gè)重要點(diǎn)就是讓template可編程,
例如： 傳來(lái)一個(gè)字符串按鈕,如何顯示成為組件而不是字符串標(biāo)簽?zāi)亍?/p>

關(guān)鍵點(diǎn)： 使用js和vue extends

新建js

export default Vue.component('CustomTemplate', {
    props: {
        html: String
    },
    render (h) {
      return h(Vue.extend({ // 關(guān)鍵點(diǎn)
          template: `
${this.html}
`,
          data () {
            return {
              current: ''
            }
          },
          methods: {
            doclick (uuid, id) {
              this.current = uuid
              this.$store.commit('EditPanel/changeId', uuid)
            },
            dodragstart (ev) {
              ev.dropEffect = 'move'
            }
          }
    }))
  },
})

拖放操作和數(shù)據(jù)的組裝

在文章開頭已經(jīng)分析好了，整個(gè)數(shù)據(jù)的流向，接下來(lái)就是用vuex去實(shí)現(xiàn)。

拖放組件使用vuedraggable,拖放完成的時(shí)候，鑒于MVVM的特點(diǎn)，畫面改變<=>數(shù)據(jù)改變，操作vuex時(shí)注意不能直接修改state

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

整個(gè)數(shù)據(jù)流向： 左欄組件庫(kù)<-->中間展示欄 <---->右欄屬性設(shè)置, 控制不好數(shù)據(jù)的話，可能會(huì)出現(xiàn)原始數(shù)據(jù)被修改的情況。請(qǐng)看：

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

這就會(huì)無(wú)意間導(dǎo)致數(shù)據(jù)被修改，很難排查?？梢允褂?code>Object.freeze凍結(jié)對(duì)象，避免出錯(cuò)。

Object.freeze

function deepFreeze(obj) {

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

  // 在凍結(jié)自身之前凍結(jié)屬性
  propNames.forEach(function(name) {
    var prop = obj[name];

    // 如果prop是個(gè)對(duì)象，凍結(jié)它
    if (typeof prop == 'object' && prop !== null)
      deepFreeze(prop);
  });

  // 凍結(jié)自身(no-op if already frozen)
  return Object.freeze(obj);
}

關(guān)于vue如何實(shí)現(xiàn)可視化可拖放的自定義表單就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。