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'

提供多種樣式的隨機數，範圍、大小、浮點等，總有知足你的隨機需求。

正則

經常使用正則提供，以及簡便方式調用。