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'
提供多種樣式的隨機數，范圍、大小、浮點等，總有滿足你的隨機需求。
正則
常用正則提供，以及簡便方式調用。