属性,多乎哉不多也。
原生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加载的话,意味着可以热更新,同时打包的体积也可以小很多。
看着挺好,但是实际上却……
如果你觉得上面的方法确实挺好的话,说明你没有实践过,如果真的用过就会觉得,完全不是这么回事,还不如直接写属性来的方便。
那么差在哪里呢?—— 差在了缺少一个辅助工具。
写个小工具生成属性的数据
这几天都在做这个小工具,弄的有点头大,因为属性实在太多了。
后来发现自己的方向搞错了,这么弄会s人的。
于是换了一下思路,把属性分成两大类:
- 一个是基础属性,基于HTML5原生属性;
- 一个是扩展属性,就是UI库提供的属性。
这样可以先把基础属性搞起来,然后在慢慢弄扩展属性。
于是做成了这个样子:
或者这样:
(看着是不是有点眼熟)
左面设置属性,右面立即渲染dom,下面是生成的属性对象,有js版和json版。
这样是不是很方便了呢?
这还只是第一步,因为这只是一个控件,那么一个表单里面有多少个这样的控件呢?
如果能够集中设置成一个大的json的话,是不是更方便了呢?
还有UI库的扩展属性,数据验证功能等。
大概还要好几天才能弄好。