摘要:實(shí)現(xiàn)如例子所示的可視化可拖放表單功能。點(diǎn)擊某個(gè)組件時(shí),在右欄顯示其屬性,其實(shí)也就是在存放的數(shù)據(jù)中查找數(shù)據(jù)迭代屬性。左中右三欄左右固定中間自適應(yīng)布局首先,布局上來看,左右都是可以拉伸的,中間是自適應(yīng)的布局。可以使用凍結(jié)對(duì)象,避免出錯(cuò)。
實(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)布局首先,布局上來看,左右都是可以拉伸的,中間是自適應(yīng)的布局。
左右分別float left和float right, 中間欄使用margin撐開布局,即可完成布局
動(dòng)態(tài)縮放瀏覽器窗口來查看效果
動(dòng)態(tài)顯示template第二個(gè)重要點(diǎn)就是讓template可編程,
例如: 傳來一個(gè)字符串
關(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: `拖放操作和數(shù)據(jù)的組裝${this.html}`, data () { return { current: "" } }, methods: { doclick (uuid, id) { this.current = uuid this.$store.commit("EditPanel/changeId", uuid) }, dodragstart (ev) { ev.dropEffect = "move" } } })) }, })
在文章開頭已經(jīng)分析好了,整個(gè)數(shù)據(jù)的流向,接下來就是用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ù)被修改,很難排查。可以使用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); }
demo項(xiàng)目github
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/102718.html
摘要:注意點(diǎn)在鼠標(biāo)操作拖放期間,有一些事件可能觸發(fā)多次,比如和。可拖拽元素,建議使用,設(shè)定可拖拽元素的鼠標(biāo)游標(biāo),提升交互。在中使用拖拽中使用可以直接綁定到組件上。 什么是 Drag and Drop (拖放)? 簡(jiǎn)單來說,HTML5 提供了 Drag and Drop API,允許用戶用鼠標(biāo)選中一個(gè)可拖動(dòng)元素,移動(dòng)鼠標(biāo)拖放到一個(gè)可放置到元素的過程。 我相信每個(gè)人都或多或少接觸過拖放,比如瀏覽...
摘要:如其他屬性及方法,詳細(xì)可以查看跨終端能力跨終端能力是最大的特點(diǎn)。在指定區(qū)域的事件中,通過對(duì)象的屬性,即可獲得文件列表信息,如打印文件名在中實(shí)踐在項(xiàng)目中使用,依然遵循數(shù)據(jù)驅(qū)動(dòng)的原則,即事件數(shù)據(jù)更新。同時(shí),在事件中執(zhí)行判斷。最近有個(gè)需求,需要產(chǎn)品導(dǎo)航欄支持拖放。 雖然開源社區(qū)已有不少成熟的拖放庫(kù),但考慮到代碼可控性和可定制性,還是自己寫吧。 選型 關(guān)于選型,前端實(shí)現(xiàn)拖放功能,無(wú)外乎幾種: 1、通...
摘要:使用的一個(gè)普通的特性就是元素的拖放。拖拽內(nèi)嵌元素拖拽多個(gè)元素拖拽時(shí)文本選中瀏覽器默認(rèn)的拖拽行為是選擇里的元素。廢止了這種行為,沒有。為了支持這種情況,被拖拽元素都增加了這個(gè)類。在拖拽結(jié)束后被去除。 使用jsPlumb的一個(gè)普通的特性就是元素的拖放。方法如下:myInstanceOfJsPlumb.draggable(elementId); 接受的參數(shù)類型 元素id的字符串 元素 li...
閱讀 2791·2021-11-17 09:33
閱讀 4454·2021-09-22 15:57
閱讀 2866·2019-08-30 14:16
閱讀 3133·2019-08-29 14:07
閱讀 2413·2019-08-26 11:55
閱讀 3415·2019-08-23 17:07
閱讀 1725·2019-08-23 16:50
閱讀 2535·2019-08-23 16:08