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

成都創新互聯是一家專注網站建設、網絡營銷策劃、重慶小程序開發、電子商務建設、網絡推廣、移動互聯開發、研究、服務為一體的技術型公司。公司成立10余年以來，已經為近1000家成都廣告設計各業的企業公司提供互聯網服務。現在，服務的近1000家客戶與我們一路同行，見證我們的成長；未來，我們一起分享成功的喜悅。

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

首先，布局上來看，左右都是可以拉伸的，中間是自適應的布局。

左右分別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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

分享標題：vue實現可視化可拖放的自定義表單的示例代碼
地址分享：http://vcdvsql.cn/article22/gjccjc.html

成都網站建設公司_創新互聯，為您提供商城網站、云服務器、網站維護、品牌網站制作、全網營銷推廣、面包屑導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯