如何優雅的設定UI庫元件的屬性？

金色海洋（jyk）發表於2022-01-05
UI元件

UI庫提供了很多元件，元件又帶有很多屬性，有一些常用屬性我們可以記住並且手擼，但是有些不常用的屬性，或者需要設定多個屬性，這樣的情況下寫起來就麻煩了，有時候還要開啟幫助文件看看屬性是怎麼設定的，需要設定什麼樣的屬性值。
那麼有沒有優雅的方式來設定元件的各種屬性呢？我做了一個線上小工具，可以方便的設定屬性，並且可以實時看到效果。

演示地址

https://naturefw.gitee.io/nf-rollup-ui-controller/

原始碼

https://gitee.com/naturefw/nf-rollup-ui-controller

技術棧

  • vite：^2.6.4
  • vue3： ^3.2.16
  • element-plus： ^1.2.0-beta.3
  • @element-plus/icons： ^0.0.11

特點

  • 可以選擇元件型別，文字、數字、日期、select、checkbox、radio、等等；
  • 根據選擇的元件型別，設定對應的屬性，按需設定，不顯示“無效”屬性；
  • 可以實時顯示效果，設定屬性後可以立即看到效果，方便調整屬性；
  • 設定好的屬性可以生成js的物件和模板程式碼，支援 json 格式；
  • 大部分屬性值都可以通過滑鼠點選的方式生成，少數的需要手敲；

工作量比較大、精力有限，目前僅支援 element-plus 的部分元件，理論上可以支援任何UI庫，只是設定屬性有點太繁瑣了，需要時間進行學習、掌握和理解，把相關屬性合在一起，還有除錯演示程式碼等工作。
有沒有感興趣的小夥伴來幫幫忙？

實現思路

實現方法比較土，就是把需要的元件分個類，再把需要的屬性分成兩種：基礎屬性、擴充套件屬性，然後就是力氣活了，把各種屬性整理出來即可。

基礎 元件 分類.png

大類原則

主要是看內容，文字、日期、數字很明顯的可以分別歸類，選擇和下拉都是選擇型別的，分成兩類主要是小分類比較多，分開更清晰一些。

小類原則

  • 按照UI庫提供的元件
  • 按照功能，“原子”級別
  • 按照值的型別，比如陣列和非陣列。

範圍類的元件，值的型別是陣列，非範圍型的元件，值的型別不是陣列，在動態改變某屬性值的時候，陣列和非陣列有的時候不能自動變更型別，導致程式碼出錯。

這樣就需要把範圍類的和非範圍類的分開，比如 select 的單選模式和多選模式，只是一個 “multiple” 屬性的區別，但是這個屬性不能在執行時修改，否則會報錯，所以只好分成兩個小類。

好吧，其實你不用關心這些。

舉例

el-input 可以細分為多個小類：單行文字，多行文字，密碼，URL，可選等。
為什麼要細分呢？因為不同的小類需要的屬性是不同的，細分一下可以縮小備選的屬性範圍，設定起來更清晰，否則像官網那樣，各種屬性都堆在一起，還得分辨一下是否是支援某個小類。

比如 “show-word-limit” 僅支援單行文字和多行文字，並不支援其他小類。如果我要設定一個密碼元件的屬性，那麼就不需要顯示 “show-word-limit”這個屬性，否則看起來就會比較亂。

所以通過細分小類的方式顯示需要的屬性，避免混淆。

基礎屬性

表單裡的元件共有的屬性：

基礎屬性

基本上表單裡的元件都需要這幾個屬性，所以拿出來作為基礎屬性，一起設定。
擴充套件屬性按照分類分別設定。

文字類

  • 單行文字

單行文字

  • 可以選擇的文字

有備選項的文字框

可選可填的文字框

  • 設定顏色

顏色

數字類

  • 數字

數字

  • 滑塊

滑塊

滑塊

滑塊效果

  • 評分

評分

其實最大值沒有做限制，可以＞5

評分顏色

日期類

  • 日期

日期

日期

  • 日期範圍

設定日期範圍

日期範圍演示

選擇類

  • 開關

設定開關

開關

  • 多選

設定多選

多選

下拉類

  • 單選下拉選單框

設定下拉選單框

下拉選單框

不一一列舉了，感興趣的小夥伴可以看線上演示。
https://naturefw.gitee.io/nf-rollup-ui-controller/

生成模板和程式碼

屬性設定完畢之後，可以生成template模板程式碼，以及js裡定義的物件，支援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: '選項1',
      disabled: false
    },
    {
      value: '2',
      label: '選項2',
      disabled: false
    },
    {
      value: '3',
      label: '選項3',
      disabled: false
    },
    {
      value: '4',
      label: '選項4',
      disabled: false
    }
  ] 
})
  • json 格式
{
  "colName": "test",
  "kind": 15,
  "controlType": 152,
  "colCount": 0,
  "isClear": false,
  "clearable": true,
  "optionList": [
    {
      "value": "1",
      "label": "選項1",
      "disabled": false
    },
    {
      "value": "2",
      "label": "選項2",
      "disabled": false
    },
    {
      "value": "3",
      "label": "選項3",
      "disabled": false
    },
    {
      "value": "4",
      "label": "選項4",
      "disabled": false
    }
  ]
}

為啥要支援json呢？大家可以猜一猜。

時間倉促，可能有一點小bug，還有屬性值是物件的情況，暫時還沒有支援；屬性是元件（比如圖示）的情況，支援的也不理想。

已知的幾個小問題：

  • 評分的小星星為啥顯示不全？
    目前沒找到原因。

  • 顏色值的返回型別為啥不變？
    型別好像不能在執行時修改，執行前設定型別是有效的。

  • 日期元件的“年周”型別，同時設定顯示格式和返回格式，會出錯。
    線上演示做了封裝（不支援自定義格式），所以沒出錯，但是原生元件不支援兩個屬性一起設定，或者是我使用的方式不對。

相關文章