代码改变世界

如何优雅的设置UI库组件的属性？

2022-01-05 16:05  金色海洋（jyk）  阅读(711)  评论(0)  编辑  收藏  举报

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，还有属性值是对象的情况，暂时还没有支持；属性是组件（比如图标）的情况，支持的也不理想。

已知的几个小问题：

  • 评分的小星星为啥显示不全？
    目前没找到原因。

  • 颜色值的返回类型为啥不变？
    类型好像不能在运行时修改，运行前设置类型是有效的。

  • 日期组件的“年周”类型，同时设置显示格式和返回格式，会出错。
    在线演示做了封装（不支持自定义格式），所以没出错，但是原生组件不支持两个属性一起设置，或者是我使用的方式不对。

2