Vue-draggable 實現頁面模板自動化

支持組件:

 廣告輪播,導航菜單,導航魔方,分割線,商品搜索條,商品列表,店鋪列表,代金券列表,活動列表,文章列表,視頻列表,相冊列表,直播列表。

功能說明:

1.從左側拖入組件到中間容器內。左側組件不變,只是clone節點到中間容器。 

2. 中間容器不可再拖入左側。中間容器各個部件可以在容器內上下拖動進行排序。

3. 支持同類型多組件。從左側拖入相同組件的時候,會先從中間容器拷貝同類型的部件。重用樣式。每個部件id值唯一。

4. 中間容器 選中某個部件,在選中的部件右上角顯示刪除按鈕。右邊顯示對應的部件屬性。

5. 修改右邊對應的部件屬性,中間容器對應的部件可實時顯示效果。

6. 右邊部件的屬性根據 每個部件的類型不同而決定。

7. 中間容器下方底部可設置大容器的頁面背景顏色。

9. 最後提交保存全部部件的屬性。這樣就完成了一個頁面模板。 下次頁面模板編輯的時候,頁面進入直接顯示實時效果。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章