資訊專欄INFORMATION COLUMN
摘要：實現如例子所示的可視化可拖放表單功能。點擊某個組件時，在右欄顯示其屬性，其實也就是在存放的數據中查找數據迭代屬性。左中右三欄左右固定中間自適應布局首先，布局上來看，左右都是可以拉伸的，中間是自適應的布局?？梢允褂脙鼋Y對象，避免出錯。
實現如例子所示的可視化可拖放表單功能。整個頁面，分為左中右三欄布局，左欄的部件庫的部件（組件）作為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 }
這就會無意間導致數據被修改，很難排查?？梢允褂?b>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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/102718.html
摘要：注意點在鼠標操作拖放期間，有一些事件可能觸發多次，比如和。可拖拽元素，建議使用，設定可拖拽元素的鼠標游標，提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop （拖放）？ 簡單來說，HTML5 提供了 Drag and Drop API，允許用戶用鼠標選中一個可拖動元素，移動鼠標拖放到一個可放置到元素的過程。 我相信每個人都或多或少接觸過拖放，比如瀏覽...
摘要：如其他屬性及方法，詳細可以查看跨終端能力跨終端能力是最大的特點。在指定區域的事件中，通過對象的屬性，即可獲得文件列表信息，如打印文件名在中實踐在項目中使用，依然遵循數據驅動的原則，即事件數據更新。同時，在事件中執行判斷。最近有個需求，需要產品導航欄支持拖放。 雖然開源社區已有不少成熟的拖放庫，但考慮到代碼可控性和可定制性，還是自己寫吧。 選型 關于選型，前端實現拖放功能，無外乎幾種： 1、通...
摘要：使用的一個普通的特性就是元素的拖放。拖拽內嵌元素拖拽多個元素拖拽時文本選中瀏覽器默認的拖拽行為是選擇里的元素。廢止了這種行為，沒有。為了支持這種情況，被拖拽元素都增加了這個類。在拖拽結束后被去除。 使用jsPlumb的一個普通的特性就是元素的拖放。方法如下：myInstanceOfJsPlumb.draggable(elementId); 接受的參數類型 元素id的字符串 元素 li...
閱讀 2799·2021-11-17 09:33
閱讀 4479·2021-09-22 15:57
閱讀 2877·2019-08-30 14:16
閱讀 3140·2019-08-29 14:07
閱讀 2419·2019-08-26 11:55
閱讀 3431·2019-08-23 17:07
閱讀 1731·2019-08-23 16:50
閱讀 2543·2019-08-23 16:08
