Element沒更新了？Element沒更新，基於El的擴充套件庫更新

阿新 • • 發佈：2020-03-26

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

一個容器塊控制元件，將一個頁面的裡面特定功能的區域進行分組顯示。提供最大化、最小化、全屏顯示的基礎特性

摺疊容器，專案中對更多資訊展示時，可以用到。本質是對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結合而來。

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'

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

正則

常用正則提供，以及簡便方式呼叫。