整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
篇文章本來是為了Github starts突破2k 留的紀(jì)念，并沒有寫太多內(nèi)容， 沒想到過了2天頭條開始推送，評(píng)論，點(diǎn)贊量很多，有點(diǎn)驚喜也有點(diǎn)意外啊！
vue-form-making 這個(gè)項(xiàng)目我們沒有做什么推廣，從2018年開始每天幾個(gè)星星慢慢積累起來了2000個(gè)， 能得到大家支持與認(rèn)可，我們還是非常的欣喜，我們這幾年的努力沒有白費(fèi)。
在此叩謝。
以下是近期Github的流量圖:
Github Clone 數(shù)量比之前多了很多
Vistors 也是持續(xù)上漲中
雖然之前我們就上過一次Github Trending 榜單，但是還是不介意再上一次，哈哈。
好了言歸正傳，我來解釋下這個(gè)項(xiàng)目是做什么的，為什么這么受歡迎。
基于Vue 頁面設(shè)計(jì)器，只需用拖拽的方式就能設(shè)計(jì)并生成完整的html文件或是Vue組件，直接可用。
如果你是前端開發(fā)者
能減少大量的重復(fù)工作，常用組件從左邊組件庫拖拽即可，每個(gè)組件有不同的屬性，點(diǎn)擊設(shè)計(jì)器中的組件就可以在右邊配置各種屬性，各種布局控件能滿足大部分的復(fù)雜頁面的涉及需求。如果我們提供的這些組件還不能滿足您的需求，我們提供了自定義組件，您只需要在自定義區(qū)域?qū)懽约捍a即可。
如果你是后端開發(fā)者
大量內(nèi)置控件能滿足你的需求，css樣式也是內(nèi)置了，如果沒有特別復(fù)雜的需求，不用寫任何前端代碼，只需要在設(shè)計(jì)器中拖動(dòng)控件就能完成頁面設(shè)計(jì)，實(shí)時(shí)預(yù)覽頁面效果，數(shù)據(jù)生成JSON格式，你只需要關(guān)注后端開發(fā)，提供Resful 接口即可輕松實(shí)現(xiàn)前后端的交互。
如果你想搭建自己的一套設(shè)計(jì)器
您可以基于我們的源碼進(jìn)行二次開發(fā)，我們提供源碼和文檔，助你快速搭建屬于自己的網(wǎng)站設(shè)計(jì)器。
設(shè)計(jì)器
組件庫
我們以新聞發(fā)布頁面為例子
第一步
如圖拖動(dòng)控件到設(shè)計(jì)器中間，根據(jù)業(yè)務(wù)需要修改字段標(biāo)識(shí)和標(biāo)題兩個(gè)參數(shù)：
分類使用的是下拉框組件，需要設(shè)置參數(shù)，可以設(shè)置靜態(tài)參數(shù)和遠(yuǎn)程參數(shù):
設(shè)置為遠(yuǎn)端數(shù)據(jù)，只需自己寫好和后端交互代碼，將數(shù)據(jù)交給頁面渲染
相關(guān)代碼
remoteFuncs: {
func_test (resolve) {
// 下拉選擇框 select_1566990949275
// 獲取到遠(yuǎn)端數(shù)據(jù)后執(zhí)行回調(diào)函數(shù)
// resolve(data)
// 模擬數(shù)據(jù)獲取
setTimeout(() => {
const options = [
{value: 'value1', label: 'label1'},
{value: 'value1', label: 'label1'},
{value: 'value1', label: 'label1'},
]
// 對(duì)象中 value、label 是設(shè)計(jì)器中配置的值和標(biāo)簽
resolve(options)
}, 2000)
},
}
第二步
沒有第二步，直接預(yù)覽：
點(diǎn)擊預(yù)覽按鈕即可查看效果：
也可以插入數(shù)據(jù)測(cè)試：
點(diǎn)擊獲取數(shù)據(jù)即可得到剛才添加的數(shù)據(jù)：
以上新聞純屬扯淡，不用太當(dāng)真，要不然真會(huì)甩出個(gè)大更新出來。
如果你覺得設(shè)計(jì)的頁面滿意了，點(diǎn)擊生產(chǎn)代碼：
直接保存成html 文件即可打開運(yùn)行，是不是很簡(jiǎn)單！
更多詳情和開發(fā)文檔請(qǐng)?jiān)L問下方鏈接
工具地址：
http://tools.xiaoyaoji.cn/form
GitHub地址：
https://github.com/GavinZhuLei/vue-form-making
lement Plus 的彈窗組件 ElDialog 在默認(rèn)情況下是不可拖拽和全屏的。要實(shí)現(xiàn)這兩個(gè)功能,可以通過以下方式:
實(shí)現(xiàn)拖拽
實(shí)現(xiàn)全屏
這樣就可以實(shí)現(xiàn) Element Plus 的 ElDialog 組件拖拽和全屏功能。更多 CSS 樣式可以根據(jù)需求自定義。
通過組合 Composition API,可以靈活擴(kuò)展組件的功能,如拖拽、全屏、自定義關(guān)閉邏輯等, making Element Plus 更易用。
最終實(shí)現(xiàn)效果如下：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
效果圖：
演示地址：Vue Shop Vite
過拖放實(shí)現(xiàn)添加、刪除
DataTransfer對(duì)象
包含的屬性和方法
dataTransfer.dropEffect:設(shè)置或返回拖放目標(biāo)上允許發(fā)生的拖放行為。如果此處設(shè)置的拖放行為不在effectAllowed屬性設(shè)置的多種拖放行為之內(nèi)，拖放操作將會(huì)失敗。該屬性值只允許為none、copy、link和move四個(gè)值之一。
dataTransfer.effectAllowed:設(shè)置或返回被拖動(dòng)元素允許發(fā)生的拖放行為。該屬性值可設(shè)置為none、copy、copyLink、copyMove、link、linkMove、move、all和uninitialized。
dataTransfer.items:該屬性返回DataTransferltems對(duì)象，代表拖動(dòng)數(shù)據(jù)。
dataTransfer.setDraglmage(element,x,y):設(shè)置拖放操作的自定義圖標(biāo)。
dataTransfer.addElement(element)：添加自定義圖標(biāo)。
dataTransfer.types：該屬性返回一個(gè)DOMStringList對(duì)象，該對(duì)象包括了存入dataTransfer中數(shù)據(jù)的所有類型。
dataTransfer.getData(format)：獲取DataTransfer對(duì)象中format格式的數(shù)據(jù)。
dataTransfer.setData(format,data)：向DataTransfer對(duì)象中設(shè)置format格式的數(shù)據(jù)。format代表數(shù)據(jù)格式，data代表數(shù)據(jù)。
dataTransfer.clearData([format])：清除DataTransfer對(duì)象中format格式的數(shù)據(jù)。
可以將喜歡的水果放入下面的方框內(nèi)，如果喜歡，可以放到右邊的盤子內(nèi)。
拖放行為
通過設(shè)置DataTransfer對(duì)象的effectAllowed、dropEffect兩個(gè)屬性可以控制拖放行為。effectAllowed用于控制被拖動(dòng)元素的拖動(dòng)行為，dropEffect來控制被“放”入得目標(biāo)組件的行為。
如果effectAllowed設(shè)為none，則不允許拖動(dòng)該元素。
如果dropEffect設(shè)置為none，則被拖動(dòng)的元素不能“放”到本元素中。
如果effectAllowed設(shè)置為all或不設(shè)置，則dropEffect可設(shè)置為任何屬性值，而且將會(huì)遵守dropEffect指定的拖放行為。
如果effectAllowed指定了特定的拖放行為，那么dropEffect指定的屬性值必須是effectAllowed指定的多個(gè)屬性值的子集。
上面代碼通過調(diào)用DataTransfer對(duì)象的setDragImage可以改變拖放過程中圖標(biāo)。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
