vue可視化拖拽生成工具_vue實作可視化可拖放的自定義表單（代碼示例）

本篇文章給大家帶來的内容是關于vue實作可視化可拖放的自定義表單(代碼示例)，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

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

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

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

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

動态縮放浏覽器視窗來檢視效果

動态顯示template

第二個重要點就是讓template可程式設計,

例如： 傳來一個字元串按鈕,如何顯示成為元件而不是字元串标簽呢。

關鍵點： 使用js和vue extends

建立js

export default Vue.component('CustomTemplate', {

props: {

html: String

},

render (h) {

return h(Vue.extend({ // 關鍵點

template: `

${this.html} `,

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

}

本篇文章到這裡就已經全部結束了，更多其他精彩内容可以關注PHP中文網的JavaScript教程視訊欄目！