建站
咨詢
售后
建站咨詢
新聞中心
我們先對整個平臺的設(shè)計做一下簡單回顧：
臨洮網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站建設(shè)等網(wǎng)站項目制作，到程序開發(fā)，運營維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
這里是我平時自己維護(hù)的一個低代碼平臺，技術(shù)棧是Vue。后續(xù)的分享也是基于該平臺的一些具體實現(xiàn)細(xì)節(jié)展開
和市面上大部分可視化搭建系統(tǒng)基本類似。左側(cè)對應(yīng)組件區(qū)域，中間是畫布區(qū)域，右側(cè)是屬性區(qū)域。
大致操作流程就是拖動左側(cè)的組件到中間的畫布，選中組件，右側(cè)屬性面板就會展示與該組件關(guān)聯(lián)的屬性。編輯右側(cè)屬性，畫布中對應(yīng)的組件樣式就會同步更新。頁面拼接完成，可通過預(yù)覽按鈕進(jìn)行頁面預(yù)覽。預(yù)覽無誤，即可通過發(fā)布按鈕進(jìn)行活動的發(fā)布。
當(dāng)然其中也有撤銷、重做等操作。
今天我們來探討的是選中畫布中指定組件，右側(cè)屬性面板展示與該組件關(guān)聯(lián)的表單，修改右側(cè)表單，畫布中的組件樣式會同步更新。
首先來看一下編輯器全局的數(shù)據(jù)結(jié)構(gòu)：
const editorModule = {
state: {
components: [],
currentElement: "",
},
mutations: {
addComponentToEditor(state, component) {
component.id = uuidv4();
state.components.push(component);
},
setActive(state, id) {
state.currentElement = id;
},
updateComponent(state, { id, key, value, isProps }) {
const updatedComponent = state.components.find(
(component) => component.id === (id || state.currentElement)
);
if (updatedComponent) {
if (isProps) {
updatedComponent.props[key] = value;
} else {
updatedComponent[key] = value;
}
}
},
},
getters: {
getCurrentElement: (state) => {
return state.components.find(
(component) => component.id === state.currentElement
);
},
}
}editor中存儲了components(所有組件數(shù)據(jù))和currentElement(當(dāng)前選中的組件信息)。
當(dāng)點擊左側(cè)業(yè)務(wù)組件，會觸發(fā)業(yè)務(wù)組件的點擊事件，進(jìn)而觸發(fā)addComponentToEditor，向editor store的components添加一條組件。我們這里添加一個普通的文本組件，然后看下他的初始props：
{
actionType: "",
backgroundColor: "",
borderColor: "#000",
borderRadius: "0",
borderStyle: "none",
borderWidth: "0",
boxShadow: "0 0 0 #000000",
color: "#000000",
fontFamily: "",
fontSize: "14px",
fontStyle: "normal",
fontWeight: "normal",
height: "36px",
left: "97.5px",
lineHeight: "1",
opacity: 1,
paddingBottom: "0px",
paddingLeft: "0px",
paddingRight: "0px",
paddingTop: "0px",
position: "absolute",
right: "0",
tag: "p",
text: "正文內(nèi)容",
textAlign: "center",
textDecoration: "none",
top: "232px",
url: "",
width: "125px"
}當(dāng)在畫布中選中該文本組件時，就會觸發(fā)setActive，更新currentElement。(通過getCurrentElement可以獲取到當(dāng)前正在被操作的組件)。
這個時候，應(yīng)該如何添加屬性和表單的基礎(chǔ)對應(yīng)關(guān)系呢?
這個也是本篇文章的主題：低代碼平臺的屬性面板該如何設(shè)計?
1.屬性面板應(yīng)該包含哪些內(nèi)容?
我們的Choba Lego平臺中有很多業(yè)務(wù)組件，而每個富交互的頁面都是由這些業(yè)務(wù)組件堆積拼裝而成，而每個組件都包含了一些通用屬性和組件特有屬性，這些屬性反映了當(dāng)前組件的各種狀態(tài)，非常復(fù)雜。
對于單獨的組件來說，屬性面板應(yīng)該是語義化的，無論是開發(fā)還是非開發(fā)同學(xué)，通過屬性面板的操作區(qū)，就可以直觀的知道一個組件的屬性是什么，應(yīng)該如何使用和編輯。
那么屬性面板應(yīng)該包含哪些內(nèi)容呢?
- label：屬性名稱。這個可以顯式的告訴具體的屬性的作用，比如元素的寬高、邊框、背景顏色等。
- description：屬性的描述信息。對于一些特殊屬性，可能第一下通過label并不能直觀的識別屬性的含義，添加描述信息可以進(jìn)行詳細(xì)的闡述。
- content：屬性渲染器。用戶可以基于此實現(xiàn)對屬性的修改。最常見的有 textarea、input、select 等。
- error：屬性校驗信息。當(dāng)用戶輸入了不合法的或者類型不匹配時，可給予適當(dāng)?shù)腻e誤提示信息。
通過以上描述，我們會發(fā)現(xiàn)，這其實就是我們常用的表單。
2.屬性和組件的映射關(guān)系
其實上面的四塊內(nèi)容，內(nèi)容渲染器應(yīng)該是最復(fù)雜的。采用合適的渲染器來渲染對應(yīng)的屬性才是最重要的。
但存在一些場景，一些屬性可以被多種渲染器來渲染，像字體大小-fontSize，既可以用input-number，又可以用slider。那么這種場景應(yīng)該如何選用最合適的渲染器呢?其實這種我覺得完全可以看開發(fā)者和使用者的綜合意愿，沒有絕對的對錯之分。
對應(yīng)上面組件的props信息，我們可以對這些屬性做一些歸類，那歸類的標(biāo)準(zhǔn)又是什么呢?我認(rèn)為應(yīng)該把屬性與js中的數(shù)據(jù)類型做一下映射，然后在具體的分類下選用合適的渲染器。
我們知道在JavaScript中，一共有七種數(shù)據(jù)類型，字符串(String)、數(shù)字(Number)、布爾(Boolean)、空(Null)、未定義(Undefined)、Symbol和對象(Object)。其中對象類型包括：數(shù)組(Array)、函數(shù)(Function)、還有兩個特殊的對象：正則(RegExp)和日期(Date)。
這里面的空(Null)、未定義(Undefined)、Symbol和正則(RegExp)在渲染器中基本用不到。
我們先來看一下字符串(String)、數(shù)字(Number)、布爾(Boolean)和日期(Date)可能渲染的方式：
字符串(String)
|
渲染器類型 |
組件 |
|
input | |
|
textarea |
數(shù)字(Number)
|
渲染器類型 |
組件 |
|
input-number | |
|
slider |
布爾(Boolean)
|
渲染器類型 |
組件 |
|
switch |
日期(Date)
|
渲染器類型 |
組件 |
|
date |
除了這幾種，還有對象(Object)、數(shù)組(Array)、函數(shù)(Function)。
對象和數(shù)組屬于較復(fù)雜的類型，不過我們可以把它抽象為多層級(可以理解為嵌套)的基礎(chǔ)數(shù)據(jù)類型：
|
渲染器類型 |
組件 |
|
array |
像數(shù)組一般是用下拉框的形式來展現(xiàn)。
至于函數(shù)(Function)，可以采用預(yù)定義的形式：
|
渲染器類型 |
組件 |
|
function |
到這里，不難想到，我們要維護(hù)一個屬性和表單組件的對應(yīng)關(guān)系。屬性對應(yīng)上面的key，像borderColor、text、width、fontFamily這些，那組件呢?組件其實就是對屬性的具體呈現(xiàn)，像width可以用數(shù)字輸入框、text可以用普通輸入框，但是對于一些比較復(fù)雜的特性，我們自己去實現(xiàn)這些組件，就顯得捉襟見肘了，這個時候我們就可以考慮和現(xiàn)有的組件庫做一下結(jié)合了(這里我采用的是Ant Design Vue)。
那么這樣，屬性prop和component基礎(chǔ)的對應(yīng)關(guān)系就有了：
const mapPropsToComponents = {
text: {
component: "a-input",
},
width: {
component: "a-input-number",
},
borderWidth: {
component: "a-slider",
},
// ...
}但這只是滿足了常規(guī)的基礎(chǔ)組件設(shè)計，像一些獨有的屬性或者基礎(chǔ)組件不能滿足的情況，我們需要對其做一定擴(kuò)展：
|
渲染器類型 |
組件 |
|
upload | |
|
color-picker |
上面提到的上傳組件和顏色選擇組件是需要我們單獨去實現(xiàn)的。
3.屬性分類
僅僅有屬性和組件的對應(yīng)關(guān)系還不夠，每個組件都會對應(yīng)大量的表單屬性，對他們按功能做一下歸類還是很有必要的。
基本屬性也就是每個組件獨有的一些屬性，除基礎(chǔ)屬性以外，剩余的就是所有組件的通用屬性了。
屬性分類雖然是一個比較簡單的實現(xiàn)，但是能對使用者帶來很大的收益，可以清晰的知道每種屬性更改對組件帶來的不同影響。
4.更新表單將數(shù)據(jù)更新到屬性
有了上面的準(zhǔn)備，最重要的一步來了，那就是選中組件，屬性面板展示該組件關(guān)聯(lián)的表單屬性，修改屬性，組件數(shù)據(jù)會同步更新。
以我以往的經(jīng)驗來看：表單組件在設(shè)計時，有兩點是必須的：
- 表單初始值(默認(rèn)value)，供初始展示使用
- 表單屬性更改的事件(默認(rèn)為 change)
對于不同的表單，初始值和屬性更改后，參數(shù)的處理是不一樣的：
- 像高度、寬度這種數(shù)字類型的，傳入表單時應(yīng)保證是number(24)類型，屬性更改后，事件參數(shù)應(yīng)該是string(24px)類型的
- 字體加粗與否、傾斜與否、加下劃線與否，傳入表單時應(yīng)保證是boolean(true/false)類型，屬性更改后，事件參數(shù)應(yīng)該是string(bold/normal)類型的
所以給每一個屬性在傳入表單和事件更改后都要加一個額外的轉(zhuǎn)化函數(shù)去處理值：
- initialValueConvert
- eventChangeValueConvert
還有對屬性進(jìn)行賦值時，不是所有的表單控件接收的都是value，像checkbox就是checked，這種單獨抽一個屬性valueProp去控制即可。
其次，像上面提到的父子層級的渲染，除了component還要多加一個subComponent。
上面配置完成后，屬性和組件的對應(yīng)關(guān)系就有了：
const mapPropsToComponents = {
width: {
component: "a-input-number",
eventName: "change",
valueProp: "value",
initialValueConvert: (v) => (v ? parseInt(v) : ""),
eventChangeValueConvert: (e) => (e ? `${e}px` : ""),
text: "寬度",
},
textAlign: {
component: "a-radio-group",
subComponent: "a-radio-button",
eventName: "change",
valueProp: "value",
eventChangeValueConvert: (e) => e.target.value,
text: "對齊",
options: [
{ value: "left", text: "左" },
{ value: "center", text: "中" },
{ value: "right", text: "右" },
],
},
// ...
}我們的數(shù)據(jù)始終保持自上而下的順序，也就是說表單更新最終要反射回到總體的 store 當(dāng)中去。這個時候我們在對應(yīng)的組件當(dāng)中發(fā)射出一個事件(change)，當(dāng) change 發(fā)生的時候，我們能夠知道是哪個元素的哪個屬性，以及新的值是什么，我們就用這些信息更新這個值，這樣 store完成更新，元素的 props 發(fā)生更新，那么整個數(shù)據(jù)流動就完成了。
5.參考鏈接
https://mp.weixin.qq.com/s/u2AkeXiL0pi4799ccjR_Tg
文章題目：低代碼平臺的屬性面板該如何設(shè)計？
文章起源：http://www.5511xx.com/article/cohpisd.html
