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

think-vuele

基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些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-awesome、remixicon给放在此处供参考使用，不作强制依赖。

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版本网上有不少封装支持。这个是单独本身的，提供了一些简便操做，且与element的form进行了融合。不作强制依赖，属于dev引入。

CodeDisplay

有了AceEditor对于html、css、js若是不能实时显示结果，那也挺很差玩的，因此作了一个实时显示代码的功能。感谢iview做者大佬在掘金小册贡献的代码。

Loading

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

LetterAvatar

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

Clamp

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

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

与el的tip提示融合，扩展了tip提示；优化了收起展开的功能。能够试用一下，你确定会喜欢。

Skeleton

骨架屏，通常在移动端用的多一点，且不少骨架屏的文章都是智能骨架屏，根据内容区域自动计算loading区域。我这个比较简单，且是来自于github上大神michalsnik的michalsnik/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-for的option循环。我给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

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

在设计表单的时候，咱们会把新增、编辑、查看放一个页面，用参数控制只读，而后底下一个保存一个关闭，当查看的时候，直接把form的disabled设置为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

能够编辑的表格树控件，TreeTable和EditTable结合而来。

Pager

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

另外对回调函数进行了改造，多了一个pager-change，当pageIndex和pageSize发生变化时触发，否则代码里面都是一个分页组件两次监听，由于咱们大多数时候监听就是直接调用后端方法，至因而index变化仍是size变化咱们不多关心.

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

MessageBox

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

Dialog

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

对于dialog的优化以下：

• 优化了title，看上去更像一个窗口
• 提供了open到opened的loading支持
• 提供了open到opened的skeleton骨架屏的支持
• 宽高百分比的支持
• dialog底部固定条支持
• 提供了更多的钩子函数好比open、opened、close、closed、beforeClose等

工具组件

经常使用工具包

很是基础的工具包，当前你也能够选择其余优化的开源工具组件包，这里面只是内置的经常使用的。

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

随机数

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

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

正则

经常使用正则提供，以及简便方式调用。