拖拽表單-QLView（第一版）

QLView

npm 地址：https://www.npmjs.com/package/qlview

csdn 地址：https://blog.csdn.net/b7410852963/article/details/106215600

demo 地址https://qlaiqyc_572.gitee.io/public-layout

起因

受前同事觸發，避免複寫代碼，打算寫個拖拖拽拽的 項目 來進行 頁面拼湊，完成項目開發，由於比較熟悉Vue 所以主要使用的是 Vuex + Vue + vuedraggable + view-design 完成

需要解決的問題

• 怎麼保證數據一致行 - JSON
• 怎麼構建一個table ; 兩種方案

1. 使用table 來處理，每個格子採用render 缺點是太複雜特別是嵌套的情況（捨棄）
2. 參考 柵格 來進行自定義劃分 規則而言 相對簡單更多

• 拖拽插件的選取 vuedraggable（主要是星星比較多）
• 組件庫的選取（iview ElementUI） 個人覺得 iview 好看一些
• 文件生成 FileSaver
• ==========
• 本地開發的時候 引入包
• npm 發佈包 ，遠程引用

1. unpkg 的使用

項目結構

使用