属性，多乎哉不多也。

原生HTML5提供了一些属性，然后UI库又在此基础上扩展了好多属性，所以与其说学习UI库，倒不如说是学习这些属性都是啥意思。

当然平时在使用的时候还是挺轻松的，设置需要的属性就好，其他的用到的时候再去看就好。

于是我们一般会按照官网的例子写属性值，比如这样：

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

但是感觉哪里不对的样子。

v-bind="{}" 要怎么用？

既然Vue提供了这么方便的绑定方式，我们弃之不用是不是有点可惜了呢？

于是我这么绑定属性

<el-input v-model="model.text" v-bind="metaText">

 const metaText = reactive({
    controlId: 101,
    colName: 'name',
    controlType: 101,
    defaultValue: '1',
    readonly: false,
    disabled: false,
    placeholder: '请输入姓名',
    title: '姓名',
    maxlength: 6,
    minlength: 2,
    autofocus: true,
    'suffix-icon': 'el-icon-date'
  })

这样是不是更优雅了一些呢？这些属性当然不用全写，而是需要哪个就写哪个，不需要的划掉就好。

这样集中管理属性，一次性统一绑定，以后增减属性的话，不用改模板了，只需要改这个对象就好。

而且，这个可以转换成 json 的格式，也就是说可以方便的用 require 加载，或者用 axios 加载。

require 方便好用，但是打包的时候会把 json 文件也加进来。
而用axios加载的话，意味着可以热更新，同时打包的体积也可以小很多。

看着挺好，但是实际上却……

如果你觉得上面的方法确实挺好的话，说明你没有实践过，如果真的勇敢就会觉得，完全不是这么回事，还不如直接写属性来的方便。

那么差在哪里呢？—— 差在了缺少一个辅助工具。

写个小工具生成属性

这几天都在做这个小工具，弄的有点头大，因为属性实在太多了。

表单子控件属性.png

后来发现自己的方向搞错了，这么弄会s人的。

于是换了一下思路，把属性分成两大类：

• 一个是基础属性，基于HTML5原生属性；
• 一个是扩展属性，就是UI库提供的属性。

这样可以先把基础属性搞起来，然后在慢慢弄扩展属性。

于是做成了这个样子：

020基础属性多行文本.png

或者这样：

021基础属性select.png

（看着是不是有点眼熟）

左面设置属性，右面立即渲染dom，下面是生成的属性对象，有js版和json版。

这样是不是很方便了呢？

这还只是第一步，因为这只是一个控件，一个表单里面有多少个这样的控件呢？

如果能够集中设置成一个大的json的话，是不是更方便了呢？

还有UI库的扩展属性，数据验证功能等。

大概还要好几天才能弄好。