think-vuele

基于Vue和ElementUI框架進(jìn)行整合二次開(kāi)發(fā)的一個(gè)框架.提供一些elementUI沒(méi)有的或當(dāng)時(shí)沒(méi)有的控件.優(yōu)化了或簡(jiǎn)化了便于2B軟件開(kāi)發(fā)的一些控件

demo：http://vuele.tennetcn.com

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

element-ui的控件庫(kù)是el+控件名的方式進(jìn)行使用。tennetcn-ui是以tc開(kāi)頭使用的控件庫(kù)，如果你想用回el浦徊，只需前綴將tc改為el即可馏予，只是tc提供的擴(kuò)展屬性和方法回調(diào)就不起作用了。

安裝

npm i tennetcn-ui -S

如果安裝了tennetcn-ui則自動(dòng)依賴(lài)element-ui

引用

你可以像Element-UI樣整個(gè) Tennetcn-UI引入盔性，或是根據(jù)需要僅引入部分組件霞丧。我們先介紹如何引入完整的 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)
});

新提供的控件

相對(duì)于element-ui多加的控件冕香，有些也不是自己完全手寫(xiě)蛹尝，大部分來(lái)自于github,進(jìn)行了統(tǒng)一的封裝調(diào)用，與element-ui的控件進(jìn)行交互融合悉尾，且樣式上盡量與element-ui保持一致突那。

Block

一個(gè)容器塊控件，將一個(gè)頁(yè)面的里面特定功能的區(qū)域進(jìn)行分組顯示构眯。提供最大化愕难、最小化、全屏顯示的基礎(chǔ)特性

More

折疊容器，項(xiàng)目中對(duì)更多信息展示時(shí)猫缭，可以用到葱弟。本質(zhì)是對(duì)el-collapse的一個(gè)簡(jiǎn)單改造。

Icon

elementui已經(jīng)提供了圖標(biāo)組件猜丹，此處完全是將另外的字體圖標(biāo)庫(kù)font-awesome芝加、remixicon給放在此處供參考使用，不做強(qiáng)制依賴(lài)射窒。

InputMoney

源碼來(lái)自于github,kevinongko/vue-numeric在此像大神kevinongko致以謝意藏杖。

此控件作者使用的是標(biāo)準(zhǔn)的input，我改成了tc-input轮洋，也就是tc支持的和el支持的制市，inputMoney都支持，比如典型的tc-form中進(jìn)行disabled的時(shí)候弊予，表單中的控件全部進(jìn)行disabled

此控件的功能是祥楣，輸入的金額是科學(xué)計(jì)數(shù)金額，可以帶金額符號(hào)汉柒，可以自定義幾位分隔符误褪，但v-model的值，就是普通的數(shù)字碾褂。當(dāng)然kevinongko大神本身就提供了很多控制特性兽间，結(jié)合elementui就更厲害了。

InputPhone

手機(jī)號(hào)規(guī)則驗(yàn)證正塌，基礎(chǔ)的只是正則寬松驗(yàn)證中國(guó)的手機(jī)號(hào)嘀略，還要一種是提供全球的驗(yàn)證。也來(lái)源一個(gè)github的開(kāi)源驗(yàn)證庫(kù)catamphetamine/libphonenumber-js.基于這個(gè)開(kāi)源驗(yàn)證庫(kù)有一個(gè)很炫酷的示例demoLouisMazel/vue-phone-number-input.

此控件的具體使用規(guī)則見(jiàn)示例文檔

InputTag

這個(gè)控件element-ui一直沒(méi)有提供很好的官方控件乓诽，翻遍github后找到一款比較合適的帜羊，最開(kāi)始的想法是直接依賴(lài)，然后進(jìn)行標(biāo)簽封裝鸠天，后面遇到各種bug無(wú)法解決讼育，索性拉下來(lái)源碼進(jìn)行，進(jìn)行自己修改稠集，且與element-ui進(jìn)行融合奶段。相信我，你使用起來(lái)絕對(duì)滿意剥纷。

此控件在此感謝JohMun大神的JohMun/vue-tags-input開(kāi)源奉獻(xiàn)痹籍。

AceEditor

一個(gè)在線的代碼編輯器功能，支持的語(yǔ)言還挺多晦鞋，對(duì)于vue版本網(wǎng)上有很多封裝支持词裤。這個(gè)是單獨(dú)自己的刺洒，提供了一些簡(jiǎn)便操作，且與element的form進(jìn)行了融合吼砂。不做強(qiáng)制依賴(lài)逆航，屬于dev引入。

CodeDisplay

有了AceEditor對(duì)于html渔肩、css因俐、js如果不能實(shí)時(shí)顯示結(jié)果，那也挺不好玩的周偎，所以做了一個(gè)實(shí)時(shí)顯示代碼的功能抹剩。感謝iview作者大佬在掘金小冊(cè)貢獻(xiàn)的代碼。

Loading

網(wǎng)上看到了一個(gè)loading效果的純css3特效蓉坎，不能放過(guò)啊澳眷，直接改成了vue標(biāo)簽使用，提供了相關(guān)參數(shù)蛉艾。

LetterAvatar

avatar在el的某個(gè)版本才提供钳踊，此控件也是參照了github源碼eliep/vue-avatar

Clamp

文本截?cái)啵?dāng)某個(gè)文本控件顯示的內(nèi)容過(guò)多就不太友好了勿侯，當(dāng)前用樣式可以控制拓瞪，顯示成...之類(lèi)的。但總要有點(diǎn)追求助琐，讓用戶體驗(yàn)更好祭埂。

此控件參考了github上的大神Justineo的代碼庫(kù)Justineo/vue-clamp

與el的tip提示融合，擴(kuò)展了tip提示兵钮；優(yōu)化了收起展開(kāi)的功能蛆橡。可以試用一下掘譬，你肯定會(huì)喜歡泰演。

Skeleton

骨架屏，一般在移動(dòng)端用的多一點(diǎn)屁药，且很多骨架屏的文章都是智能骨架屏粥血，根據(jù)內(nèi)容區(qū)域自動(dòng)計(jì)算loading區(qū)域柏锄。我這個(gè)比較簡(jiǎn)單酿箭，且是來(lái)自于github上大神michalsnik的michalsnik/vue-content-placeholders

進(jìn)行了重新封裝，提供了2B軟件特有的field區(qū)域封裝趾娃；且與dialog進(jìn)行集成缭嫡。

優(yōu)化的相關(guān)控件

element-ui已經(jīng)做的很好了，提供了非常便捷的屬性和事件抬闷，但是對(duì)于2B軟件來(lái)說(shuō)妇蛀，對(duì)于一個(gè)控件重復(fù)的賦相同的值耕突，當(dāng)領(lǐng)導(dǎo)突然說(shuō)要統(tǒng)一改改的時(shí)候，就不好了评架，所以此優(yōu)化并不是element-ui做得不好眷茁，而是有針對(duì)性的進(jìn)行優(yōu)化，便于統(tǒng)一調(diào)用纵诞。

Button

這個(gè)組件真是沒(méi)有什么可優(yōu)化的上祈。但這個(gè)我只做了一小步，但這很重要浙芙，特別是在做e2e的測(cè)試的時(shí)候登刺；比如我們使用cypress進(jìn)行e2e測(cè)試，界面上一堆按鈕嗡呼，我們開(kāi)發(fā)的時(shí)候纸俭，很少說(shuō)會(huì)特意給按鈕取一個(gè)名字或id，這時(shí)候南窗，你就沒(méi)法區(qū)分按鈕叫什么揍很，如果你用了這個(gè)優(yōu)化過(guò)的按鈕，就會(huì)多一個(gè)固定屬性

<tc-button @click="add" />
// 結(jié)果 html
<button vevent="bound_add" ... />

具體實(shí)現(xiàn)可以看看源碼的vevent-mixin.js的實(shí)現(xiàn)

Select

每次用覺(jué)得很繁瑣矾瘾，每次都要進(jìn)行v-for的option循環(huán)女轿。我給select加了一個(gè)provider屬性。只用定義好標(biāo)準(zhǔn)的數(shù)據(jù)源格式壕翩，然后綁定到select標(biāo)簽上即可蛉迹，至于選擇判斷，那是v-model雙向綁定的事情放妈。

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

RadioGroup

與select一樣北救，自己循環(huán)數(shù)據(jù)源太麻煩，只需要定義一個(gè)數(shù)據(jù)源屬性即可芜抒。數(shù)據(jù)源格式與select一致珍策。

CheckboxGroup

同radioGroup

Input

非常常見(jiàn)，與button一樣宅倒，在e2e的測(cè)試上攘宙，我們很少會(huì)給控件取名，但基本都會(huì)給v-model屬性

<tc-input v-model="user.name" />
// 結(jié)果html
<input vname="user_name" ... />

具體實(shí)現(xiàn)參見(jiàn)源碼vname-mixin.js混入

input控件另外還擴(kuò)展了正則的支持拐迁，說(shuō)支持是多余蹭劈，js對(duì)正則本身就支持，但是我們要寫(xiě)一大堆的校驗(yàn)取值什么的吧线召？此控件對(duì)此進(jìn)行了統(tǒng)一簡(jiǎn)化铺韧，且提供了常用的正則表達(dá)式類(lèi)型輸入，比如正整數(shù)缓淹、自然數(shù)等哈打。你只用傳入支持的正則類(lèi)型或正則塔逃，會(huì)自動(dòng)過(guò)濾掉輸入的非法內(nèi)容。具體請(qǐng)前往示例文檔體驗(yàn)料仗。

InputNumber

數(shù)字輸入框提供了+-操作符湾盗，多支持了vname-mixin混入，支持了input的正則和正則類(lèi)型參數(shù)

Form

此控件沒(méi)什么好優(yōu)化的立轧，純屬臆想下的無(wú)聊之作淹仑，不知是否有真實(shí)的業(yè)務(wù)場(chǎng)景。

在設(shè)計(jì)表單的時(shí)候肺孵，我們會(huì)把新增匀借、編輯、查看放一個(gè)頁(yè)面平窘，用參數(shù)控制只讀吓肋，然后底下一個(gè)保存一個(gè)關(guān)閉，當(dāng)查看的時(shí)候瑰艘，直接把form的disabled設(shè)置為true即可是鬼，但關(guān)閉按鈕不應(yīng)該禁用對(duì)吧。此時(shí)只要在對(duì)應(yīng)的button上加一個(gè)forceEnabled屬性來(lái)控制強(qiáng)制啟用就行.

DatePicker

日期控件紫新，對(duì)于日期范圍的控制均蜜，比如開(kāi)始時(shí)間不能大于結(jié)束時(shí)間這種，官方提供的那種選擇模式不太好像芒率，就提供了此想法囤耳。遺憾的是如此簡(jiǎn)易的用法，遇到一些數(shù)據(jù)刷新上的問(wèn)題偶芍，暫未解決充择。

<tc-form>
  <tc-form-item label="開(kāi)始時(shí)間">
    <tc-date-picker v-model="date1" less-than="date2" />
  </tc-form-item>
  <tc-form-item label="結(jié)束時(shí)間">
    <tc-date-picker v-model="date2" greater-than="date1" />
  </tc-form-item>
</tc-form>

Table

使用頻率非常之高了，對(duì)于大數(shù)據(jù)量的加載網(wǎng)上評(píng)論說(shuō)el的不是太理想匪蟀，我這個(gè)也是基于el的椎麦，我的優(yōu)化點(diǎn)不在于大數(shù)據(jù)量的優(yōu)化。主要有以下幾點(diǎn)

• json定義列
• 第一列序號(hào)參數(shù)化
• checkbox參數(shù)控制
• 單選多選參數(shù)控制
• 選擇和選中同步控制
• 提供獲取選中值的方法暴露

TreeTable

最初elementui是沒(méi)有表格樹(shù)材彪，我的實(shí)現(xiàn)是另外一個(gè)思路观挎，后續(xù)el提供了后，就在后續(xù)版本沿用了el的段化，只是重新定義了名字嘁捷。但支持上面Table的擴(kuò)展點(diǎn)。

EditTable

由Table擴(kuò)展而來(lái)穗泵，提供可以直接在表格內(nèi)進(jìn)行數(shù)據(jù)編輯的功能普气。網(wǎng)上可編輯的表格谜疤，有兩種模式佃延，一是點(diǎn)擊行现诀，則編輯行。一是直接全表格可編輯履肃。我的實(shí)現(xiàn)兩種模式可參數(shù)控制仔沿。

表格的編輯類(lèi)型支持input\select\date

EditTreeTable

可以編輯的表格樹(shù)控件，TreeTable和EditTable結(jié)合而來(lái)尺棋。

Pager

el官方提供的分頁(yè)插件封锉，名字太長(zhǎng)了，比較難記膘螟，我就簡(jiǎn)化了成福。且優(yōu)化了傳入?yún)?shù)，只需要一個(gè)pager對(duì)象即可.

另外對(duì)回調(diào)函數(shù)進(jìn)行了改造荆残，多了一個(gè)pager-change奴艾，當(dāng)pageIndex和pageSize發(fā)生變化時(shí)觸發(fā)，不然代碼里面都是一個(gè)分頁(yè)組件兩次監(jiān)聽(tīng)内斯，因?yàn)槲覀兇蠖鄶?shù)時(shí)候監(jiān)聽(tīng)就是直接調(diào)用后端方法蕴潦，至于是index變化還是size變化我們很少關(guān)心.

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

MessageBox

el官方弄一個(gè)彈窗提示，傳入?yún)?shù)太多俘闯，進(jìn)行了簡(jiǎn)化

Dialog

2B軟件用彈窗的應(yīng)該還是很多的吧潭苞，當(dāng)然有的做法是開(kāi)tab頁(yè)。有一次一個(gè)同事說(shuō)tab頁(yè)的做法是對(duì)用戶體驗(yàn)的不尊重真朗，一個(gè)系統(tǒng)此疹，如果要在Atab頁(yè)查看數(shù)據(jù)，在到Btab頁(yè)進(jìn)行后續(xù)操作遮婶，那是否是用戶體驗(yàn)沒(méi)有設(shè)計(jì)好了秀菱？當(dāng)然這個(gè)還是看軟件決策者怎么決定。

對(duì)于dialog的優(yōu)化如下：

• 優(yōu)化了title蹭睡，看上去更像一個(gè)窗口
• 提供了open到opened的loading支持
• 提供了open到opened的skeleton骨架屏的支持
• 寬高百分比的支持
• dialog底部固定條支持
• 提供了更多的鉤子函數(shù)比如open衍菱、opened、close肩豁、closed脊串、beforeClose等

工具組件

常用工具包

非常基礎(chǔ)的工具包清钥，當(dāng)前你也可以選擇其他優(yōu)化的開(kāi)源工具組件包琼锋，這里面只是內(nèi)置的常用的。

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

隨機(jī)數(shù)

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

提供多種樣式的隨機(jī)數(shù)祟昭，范圍缕坎、大小、浮點(diǎn)等篡悟，總有滿足你的隨機(jī)需求谜叹。

正則

常用正則提供匾寝，以及簡(jiǎn)便方式調(diào)用。

本文由博客群發(fā)一文多發(fā)等運(yùn)營(yíng)工具平臺(tái) OpenWrite 發(fā)布