UI庫提供了很多組件线欲，組件又帶有很多屬性，有一些常用屬性我們可以記住并且手?jǐn)]汽摹，但是有些不常用的屬性李丰，或者需要設(shè)置多個(gè)屬性，這樣的情況下寫起來就麻煩了逼泣，有時(shí)候還要打開幫助文檔看看屬性是怎么設(shè)定的趴泌，需要設(shè)置什么樣的屬性值。
那么有沒有優(yōu)雅的方式來設(shè)置組件的各種屬性呢拉庶？我做了一個(gè)在線小工具嗜憔，可以方便的設(shè)置屬性，并且可以實(shí)時(shí)看到效果氏仗。
演示地址
https://naturefw.gitee.io/nf-rollup-ui-controller/
源碼
https://gitee.com/naturefw/nf-rollup-ui-controller
技術(shù)棧
- vite：^2.6.4
- vue3： ^3.2.16
- element-plus： ^1.2.0-beta.3
- @element-plus/icons： ^0.0.11
特點(diǎn)
- 可以選擇組件類型吉捶，文本、數(shù)字、日期呐舔、select币励、checkbox、radio滋早、等等；
- 根據(jù)選擇的組件類型砌们，設(shè)置對(duì)應(yīng)的屬性杆麸，按需設(shè)置，不顯示“無效”屬性浪感；
- 可以實(shí)時(shí)顯示效果昔头，設(shè)置屬性后可以立即看到效果，方便調(diào)整屬性揭斧；
- 設(shè)置好的屬性可以生成js的對(duì)象和模板代碼，支持 json 格式峻堰；
- 大部分屬性值都可以通過鼠標(biāo)點(diǎn)擊的方式生成讹开，少數(shù)的需要手敲；
工作量比較大捐名、精力有限旦万，目前僅支持 element-plus 的部分組件，理論上可以支持任何UI庫镶蹋，只是設(shè)置屬性有點(diǎn)太繁瑣了成艘，需要時(shí)間進(jìn)行學(xué)習(xí)、掌握和理解贺归，把相關(guān)屬性合在一起淆两，還有調(diào)試演示代碼等工作。
有沒有感興趣的小伙伴來幫幫忙拂酣？
實(shí)現(xiàn)思路
實(shí)現(xiàn)方法比較土秋冰，就是把需要的組件分個(gè)類，再把需要的屬性分成兩種：基礎(chǔ)屬性婶熬、擴(kuò)展屬性丹莲，然后就是力氣活了，把各種屬性整理出來即可尸诽。
大類原則
主要是看內(nèi)容甥材，文本、日期性含、數(shù)字很明顯的可以分別歸類洲赵，選擇和下拉都是選擇類型的，分成兩類主要是小分類比較多，分開更清晰一些叠萍。
小類原則
- 按照UI庫提供的組件
- 按照功能芝发，“原子”級(jí)別
- 按照值的類型，比如數(shù)組和非數(shù)組苛谷。
范圍類的組件辅鲸，值的類型是數(shù)組，非范圍型的組件腹殿，值的類型不是數(shù)組，在動(dòng)態(tài)改變某屬性值的時(shí)候刻炒，數(shù)組和非數(shù)組有的時(shí)候不能自動(dòng)變更類型自沧，導(dǎo)致代碼出錯(cuò)。
這樣就需要把范圍類的和非范圍類的分開爱谁，比如 select 的單選模式和多選模式管行，只是一個(gè) “multiple” 屬性的區(qū)別捐顷，但是這個(gè)屬性不能在運(yùn)行時(shí)修改迅涮，否則會(huì)報(bào)錯(cuò)叮姑，所以只好分成兩個(gè)小類据悔。
好吧极颓，其實(shí)你不用關(guān)心這些菠隆。
舉例
el-input 可以細(xì)分為多個(gè)小類：?jiǎn)涡形谋荆嘈形谋厩。艽a清女，URL，可選等拴袭。
為什么要細(xì)分呢稻扬？因?yàn)椴煌男☆愋枰膶傩允遣煌难虼瘢?xì)分一下可以縮小備選的屬性范圍尘吗，設(shè)置起來更清晰睬捶，否則像官網(wǎng)那樣擒贸，各種屬性都堆在一起介劫，還得分辨一下是否是支持某個(gè)小類座韵。
比如 “show-word-limit” 僅支持單行文本和多行文本誉碴，并不支持其他小類黔帕。如果我要設(shè)置一個(gè)密碼組件的屬性蹈丸，那么就不需要顯示 “show-word-limit”這個(gè)屬性，否則看起來就會(huì)比較亂贩耐。
所以通過細(xì)分小類的方式顯示需要的屬性潮太，避免混淆虾攻。
基礎(chǔ)屬性
表單里的組件共有的屬性：
基本上表單里的組件都需要這幾個(gè)屬性奇钞，所以拿出來作為基礎(chǔ)屬性漂坏，一起設(shè)置顶别。
擴(kuò)展屬性按照分類分別設(shè)置驯绎。
文本類
- 單行文本
- 可以選擇的文本
- 設(shè)置顏色
數(shù)字類
- 數(shù)字
- 滑塊
- 評(píng)分
其實(shí)最大值沒有做限制脾歧，可以＞5
日期類
- 日期
- 日期范圍
選擇類
- 開關(guān)
- 多選
下拉類
- 單選下拉列表框
不一一列舉了，感興趣的小伙伴可以看在線演示囤热。
https://naturefw.gitee.io/nf-rollup-ui-controller/
生成模板和代碼
屬性設(shè)置完畢之后获三，可以生成template模板代碼锨苏，以及js里定義的對(duì)象伞租，支持json格式葵诈。
- 模板
<el-checkbox-group
v-model="checkboxs"
v-bind="itemProps"
>
<el-checkbox
v-for="item in itemProps.optionList"
:key="'check' + columnId + item.value"
:label="item.value"
:disabled="item.disabled"
>
{{item.label}}
</el-checkbox>
</el-checkbox-group>
- js代碼
const itemProps = reactive({
colName: 'test',
kind: 15,
controlType: 152,
colCount: 0,
isClear: false,
clearable: true,
optionList: [
{
value: '1',
label: '選項(xiàng)1',
disabled: false
},
{
value: '2',
label: '選項(xiàng)2',
disabled: false
},
{
value: '3',
label: '選項(xiàng)3',
disabled: false
},
{
value: '4',
label: '選項(xiàng)4',
disabled: false
}
]
})
- json 格式
{
"colName": "test",
"kind": 15,
"controlType": 152,
"colCount": 0,
"isClear": false,
"clearable": true,
"optionList": [
{
"value": "1",
"label": "選項(xiàng)1",
"disabled": false
},
{
"value": "2",
"label": "選項(xiàng)2",
"disabled": false
},
{
"value": "3",
"label": "選項(xiàng)3",
"disabled": false
},
{
"value": "4",
"label": "選項(xiàng)4",
"disabled": false
}
]
}
為啥要支持json呢作喘？大家可以猜一猜泞坦。
時(shí)間倉促贰锁，可能有一點(diǎn)小bug择吊，還有屬性值是對(duì)象的情況槽奕，暫時(shí)還沒有支持粤攒；屬性是組件（比如圖標(biāo)）的情況，支持的也不理想焕济。
已知的幾個(gè)小問題：
評(píng)分的小星星為啥顯示不全晴弃？
目前沒找到原因逊拍。顏色值的返回類型為啥不變芯丧？
類型好像不能在運(yùn)行時(shí)修改，運(yùn)行前設(shè)置類型是有效的谴咸。日期組件的“年周”類型，同時(shí)設(shè)置顯示格式和返回格式血巍，會(huì)出錯(cuò)珊随。
在線演示做了封裝（不支持自定義格式）玫恳，所以沒出錯(cuò)，但是原生組件不支持兩個(gè)屬性一起設(shè)置掀序，或者是我使用的方式不對(duì)不恭。
