天天看點

基于 vue.js 可視化拖拽低代碼VisualDrag

今天給大家分享一個vue.js低代碼平台模闆,靠拖拉拽生成頁面。

基于 vue.js 可視化拖拽低代碼VisualDrag

visual-drag 使用 vue.js 開發建構的低代碼(可視化拖拽)模闆。實作了比較多豐富的功能。

基于 vue.js 可視化拖拽低代碼VisualDrag
基于 vue.js 可視化拖拽低代碼VisualDrag

功能清單

  • 編輯器
  • 自定義元件(文本、圖檔、矩形、圓形、直線、星形、三角形、按鈕、表格、組合)
  • 接口請求(通過接口請求元件資料)
  • 元件關聯
  • 拖拽
  • 删除元件、調整圖層層級
  • 放大縮小
  • 撤消、重做
  • 元件屬性設定
  • 吸附
  • 預覽、儲存代碼
  • 綁定事件
  • 綁定動畫
  • 拖拽旋轉
  • 複制粘貼剪切
  • 多個元件的組合和拆分
  • 鎖定元件
  • 網格線
基于 vue.js 可視化拖拽低代碼VisualDrag

快速開始

// 克隆項目
git clone https://github.com/woai3c/visual-drag-demo.git
// 安裝依賴
npm i
// 運作
npm run dev
// 建構
npm run build           

非常不錯的一款低代碼模闆,如果大家對可視化拖拽模闆感興趣,可以去看看。

// 預覽位址
https://woai3c.github.io/visual-drag-demo
// 倉庫位址
https://github.com/woai3c/visual-drag-demo           

好了,今天的分享就到這裡。

繼續閱讀