美文网首页
Element没更新了?基于El的扩展库更新

Element没更新了?基于El的扩展库更新

作者: RegicideGod | 来源:发表于2020-03-28 17:57 被阅读0次

    think-vuele

    基于VueElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便于2B软件开发的一些控件

    demo:http://vuele.tennetcn.com

    github:https://github.com/chfree/think-vuele

    element-ui的控件库是el+控件名的方式进行使用。tennetcn-ui是以tc开头使用的控件库,如果你想用回el,只需前缀将tc改为el即可,只是tc提供的扩展属性和方法回调就不起作用了。

    安装

    npm i tennetcn-ui -S
    

    如果安装了tennetcn-ui则自动依赖element-ui

    引用

    你可以像Element-UI样整个 Tennetcn-UI引入,或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Tennetcn-UI

    完整引入

    import Vue from 'vue';
    import TennetcnUI from 'tennetcn-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import App from './App.vue';
    
    Vue.use(TennetcnUI);
    
    new Vue({
      el: '#app',
      render: h => h(App)
    });
    

    新提供的控件

    相对于element-ui多加的控件,有些也不是自己完全手写,大部分来自于github,进行了统一的封装调用,与element-ui的控件进行交互融合,且样式上尽量与element-ui保持一致。

    Block

    一个容器块控件,将一个页面的里面特定功能的区域进行分组显示。提供最大化、最小化、全屏显示的基础特性

    More

    折叠容器,项目中对更多信息展示时,可以用到。本质是对el-collapse的一个简单改造。

    Icon

    elementui已经提供了图标组件,此处完全是将另外的字体图标库font-awesomeremixicon给放在此处供参考使用,不做强制依赖。

    InputMoney

    源码来自于github,kevinongko/vue-numeric在此像大神kevinongko致以谢意。

    此控件作者使用的是标准的input,我改成了tc-input,也就是tc支持的和el支持的,inputMoney都支持,比如典型的tc-form中进行disabled的时候,表单中的控件全部进行disabled

    此控件的功能是,输入的金额是科学计数金额,可以带金额符号,可以自定义几位分隔符,但v-model的值,就是普通的数字。当然kevinongko大神本身就提供了很多控制特性,结合elementui就更厉害了。

    InputPhone

    手机号规则验证,基础的只是正则宽松验证中国的手机号,还要一种是提供全球的验证。也来源一个github的开源验证库catamphetamine/libphonenumber-js.基于这个开源验证库有一个很炫酷的示例demoLouisMazel/vue-phone-number-input.

    此控件的具体使用规则见示例文档

    InputTag

    这个控件element-ui一直没有提供很好的官方控件,翻遍github后找到一款比较合适的,最开始的想法是直接依赖,然后进行标签封装,后面遇到各种bug无法解决,索性拉下来源码进行,进行自己修改,且与element-ui进行融合。相信我,你使用起来绝对满意。

    此控件在此感谢JohMun大神的JohMun/vue-tags-input开源奉献。

    AceEditor

    一个在线的代码编辑器功能,支持的语言还挺多,对于vue版本网上有很多封装支持。这个是单独自己的,提供了一些简便操作,且与elementform进行了融合。不做强制依赖,属于dev引入。

    CodeDisplay

    有了AceEditor对于htmlcssjs如果不能实时显示结果,那也挺不好玩的,所以做了一个实时显示代码的功能。感谢iview作者大佬在掘金小册贡献的代码。

    Loading

    网上看到了一个loading效果的纯css3特效,不能放过啊,直接改成了vue标签使用,提供了相关参数。

    LetterAvatar

    avatar在el的某个版本才提供,此控件也是参照了github源码eliep/vue-avatar

    Clamp

    文本截断,当某个文本控件显示的内容过多就不太友好了,当前用样式可以控制,显示成...之类的。但总要有点追求,让用户体验更好。

    此控件参考了github上的大神Justineo的代码库Justineo/vue-clamp

    eltip提示融合,扩展了tip提示;优化了收起展开的功能。可以试用一下,你肯定会喜欢。

    Skeleton

    骨架屏,一般在移动端用的多一点,且很多骨架屏的文章都是智能骨架屏,根据内容区域自动计算loading区域。我这个比较简单,且是来自于github上大神michalsnikmichalsnik/vue-content-placeholders

    进行了重新封装,提供了2B软件特有的field区域封装;且与dialog进行集成。

    优化的相关控件

    element-ui已经做的很好了,提供了非常便捷的属性和事件,但是对于2B软件来说,对于一个控件重复的赋相同的值,当领导突然说要统一改改的时候,就不好了,所以此优化并不是element-ui做得不好,而是有针对性的进行优化,便于统一调用。

    Button

    这个组件真是没有什么可优化的。但这个我只做了一小步,但这很重要,特别是在做e2e的测试的时候;比如我们使用cypress进行e2e测试,界面上一堆按钮,我们开发的时候,很少说会特意给按钮取一个名字或id,这时候,你就没法区分按钮叫什么,如果你用了这个优化过的按钮,就会多一个固定属性

    <tc-button @click="add" />
    // 结果 html
    <button vevent="bound_add" ... />
    

    具体实现可以看看源码的vevent-mixin.js的实现

    Select

    每次用觉得很繁琐,每次都要进行v-foroption循环。我给select加了一个provider属性。只用定义好标准的数据源格式,然后绑定到select标签上即可,至于选择判断,那是v-model双向绑定的事情。

    [{"id":"","text":"","value":""}]
    

    RadioGroup

    select一样,自己循环数据源太麻烦,只需要定义一个数据源属性即可。数据源格式与select一致。

    CheckboxGroup

    radioGroup

    Input

    非常常见,与button一样,在e2e的测试上,我们很少会给控件取名,但基本都会给v-model属性

    <tc-input v-model="user.name" />
    // 结果html
    <input vname="user_name" ... />
    

    具体实现参见源码vname-mixin.js混入

    input控件另外还扩展了正则的支持,说支持是多余,js对正则本身就支持,但是我们要写一大堆的校验取值什么的吧?此控件对此进行了统一简化,且提供了常用的正则表达式类型输入,比如正整数、自然数等。你只用传入支持的正则类型或正则,会自动过滤掉输入的非法内容。具体请前往示例文档体验。

    InputNumber

    数字输入框提供了+-操作符,多支持了vname-mixin混入,支持了input的正则和正则类型参数

    Form

    此控件没什么好优化的,纯属臆想下的无聊之作,不知是否有真实的业务场景。

    在设计表单的时候,我们会把新增、编辑、查看放一个页面,用参数控制只读,然后底下一个保存一个关闭,当查看的时候,直接把formdisabled设置为true即可,但关闭按钮不应该禁用对吧。此时只要在对应的button上加一个forceEnabled属性来控制强制启用就行.

    DatePicker

    日期控件,对于日期范围的控制,比如开始时间不能大于结束时间这种,官方提供的那种选择模式不太好像,就提供了此想法。遗憾的是如此简易的用法,遇到一些数据刷新上的问题,暂未解决。

    <tc-form>
      <tc-form-item label="开始时间">
        <tc-date-picker v-model="date1" less-than="date2" />
      </tc-form-item>
      <tc-form-item label="结束时间">
        <tc-date-picker v-model="date2" greater-than="date1" />
      </tc-form-item>
    </tc-form>
    

    Table

    使用频率非常之高了,对于大数据量的加载网上评论说el的不是太理想,我这个也是基于el的,我的优化点不在于大数据量的优化。主要有以下几点

    • json定义列
    • 第一列序号参数化
    • checkbox参数控制
    • 单选多选参数控制
    • 选择和选中同步控制
    • 提供获取选中值的方法暴露

    TreeTable

    最初elementui是没有表格树,我的实现是另外一个思路,后续el提供了后,就在后续版本沿用了el的,只是重新定义了名字。但支持上面Table的扩展点。

    EditTable

    Table扩展而来,提供可以直接在表格内进行数据编辑的功能。网上可编辑的表格,有两种模式,一是点击行,则编辑行。一是直接全表格可编辑。我的实现两种模式可参数控制。

    表格的编辑类型支持input\select\date

    EditTreeTable

    可以编辑的表格树控件,TreeTableEditTable结合而来。

    Pager

    el官方提供的分页插件,名字太长了,比较难记,我就简化了。且优化了传入参数,只需要一个pager对象即可.

    另外对回调函数进行了改造,多了一个pager-change,当pageIndexpageSize发生变化时触发,不然代码里面都是一个分页组件两次监听,因为我们大多数时候监听就是直接调用后端方法,至于是index变化还是size变化我们很少关心.

    {
      "pageIndex": 1,
      "pageSize": 20,
      "totalCount": 100
    }
    

    MessageBox

    el官方弄一个弹窗提示,传入参数太多,进行了简化

    Dialog

    2B软件用弹窗的应该还是很多的吧,当然有的做法是开tab页。有一次一个同事说tab页的做法是对用户体验的不尊重,一个系统,如果要在Atab页查看数据,在到Btab页进行后续操作,那是否是用户体验没有设计好了?当然这个还是看软件决策者怎么决定。

    对于dialog的优化如下:

    • 优化了title,看上去更像一个窗口
    • 提供了openopenedloading支持
    • 提供了openopenedskeleton骨架屏的支持
    • 宽高百分比的支持
    • dialog底部固定条支持
    • 提供了更多的钩子函数比如openopenedcloseclosedbeforeClose

    工具组件

    常用工具包

    非常基础的工具包,当前你也可以选择其他优化的开源工具组件包,这里面只是内置的常用的。

    import { xxx } from 'tennetcn-ui/lib/utils'
    

    随机数

    import { random } from 'tennetcn-ui/lib/utils'
    

    提供多种样式的随机数,范围、大小、浮点等,总有满足你的随机需求。

    正则

    常用正则提供,以及简便方式调用。

    本文由博客群发一文多发等运营工具平台 OpenWrite 发布

    相关文章

      网友评论

          本文标题:Element没更新了?基于El的扩展库更新

          本文链接:https://www.haomeiwen.com/subject/zlesuhtx.html