這篇文章帶給大家的內容是關於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: `<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);
}這篇文章到這裡就已經全部結束了，更多其他精彩內容可以關注PHP中文網的JavaScript教學影片專欄！
以上是vue實作可視化可拖放的自訂表單（程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
