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