若是你還不瞭解heyui組件庫,歡迎來咱們的官網或者github參觀。javascript
固然,若是能給咱們一顆✨✨✨,那是最讚的了!css
當heyui組件庫的組件愈來愈多的時候,按需加載的功能終於上線了。html
話很少說,先把按需加載的使用方式放出來。vue
按需加載在線示例java
以此圖爲例,按需加載後,js與css的大小將大幅度減少。 jquery
import Vue from 'vue';
import App from './app.vue';
import { install, Prototypes, Button, DropdownMenu } from 'heyui';
require('../css/module.less');
Vue.use(install, { components: { Button, DropdownMenu }, prototypes: Prototypes });
const app = new Vue({
el: '#app',
render: h => h(App)
});
export default app;
複製代碼
module.lessgit
@import (less) "../../themes/common.base.less";
@import (less) "../../themes/components/dropdown-menu.less";
複製代碼
其中,common.base.less將引用系統的一些基礎樣式,其餘的組件須要本身加載樣式。github
common.base.less後端
@import (less) "./mixins/index.less";
@import (less) "./fonts/font.less";
@import "extend.less";
@import "checkbox.less";
@import "radio.less";
@import "search.less";
@import "notify.less";
@import "message.less";
@import "notice.less";
@import "modal.less";
@import "tooltip.less";
@import "dropdown.less";
@import "dropdown-custom.less";
@import "tabs.less";
@import "input.less";
@import "input-group.less";
@import "button.less";
@import "grid.less";
@import "word-count.less";
複製代碼
其餘的組件加載請參考如下文件: github.com/heyui/heyui…app
既然heyui已經支持按需加載了,那接下來就介紹一下系統的一些獨特功能。
在已經使用iviewui或者elementui的前提下,你也能夠選擇單獨使用這些功能。
其實AutoComplete組件,iview與elementui都有相關的功能,可是從功能性來考慮,heyui幾乎將AutoComplete的功能全覆蓋了。
好比說:
若是你有相似的需求,能夠選擇使用heyui的AutoComplete。
相關文檔: AutoComplete文檔
覆蓋日期範圍選擇的全部需求,而且自動將結束日期+1,適配後端的小於查詢。
相關文檔: DateFullRangePicker文檔
其實,全部的組件都擁有Tree組件,可是heyui的Tree組件擁有更加細緻的處理。
heyui的Tree組件擁有三種選擇模式:
相關文檔: Tree文檔
其實,在系統開發過程當中,TreePicker是一個需求比較強烈的功能。
雖然TreePicker組件也沒有常常使用,可是,若是有相關需求的時候,能有一個完整的組件提供選擇是一件很是棒的事情。
而且,咱們的TreePicker組件提供 單選,多選,覆蓋需求的每一個角落。
相關文檔: TreePicker文檔
Category組件,是其餘組件庫都沒有的組件。
主要是用來知足一些大量標籤數據的選擇,具備很強的通用性。
好比,在咱們的應用中,用來選擇不少信息的行業標籤。
相關文檔: Category文檔
CategoryPicker組件,大概是三級地址聯動的最佳方案選擇了吧,咱們提供了很是強大的功能定製。
包括:
相關文檔: CategoryPicker文檔
提供自定義Dropdown,用戶能夠根據本身的需求定製不一樣的下拉組件。
相關文檔: DropdownCustom文檔
其中,還包括右鍵觸發的操做,以heyui-admin系統的tabs爲例。
其實,其餘組件庫也有頭像組件。
可是,heyui的頭像組件更加關注的是頭像的排版結合,十分適用於系統中的各類信息展現。
相關文檔: Avatar文檔
而且,咱們還提供了全局自定義處理src的功能。
// 經過配置能夠設置src的全局處理方式,好比根據width參數設置不一樣的圖片大小
HeyUI.config("avatar.handleSrc", (src) => {
if (!src) return '';
// this.width 能夠獲取組件的參數
let width = this.width;
if (width == undefined) return src;
return `${src}?imageView2/1/w/${width*2}/h/${width*2}`;
});
複製代碼
這種其實包含兩個部分:
圖片列表適用於一些基本的圖片展現需求,能夠自定義圖片大小以及圖片間距。
圖片預覽的功能在系統的各個角落都需求很是強烈。
目前開源比較好的是lightbox2,可是,lightbox2依賴於jquery,爲了一個圖片預覽,還須要加載jquery,很是的麻煩。
因此,咱們本身開發了一個圖片預覽功能,而且直接經過方法調用,比lightbox2的定義更加方便便捷。
相關文檔: ImagePreview 圖片預覽
超出文本省略的功能,其實也是屬於系統需求比較強烈,而使用css也很難知足的功能。
咱們開發的組件是一套適用性強,而且可以完美知足此類需求的功能。
以下圖所示,咱們擁有如下功能:
相關文檔: TextEllipsis 超出文本省略
不知道你是否還在使用clipboard.js,其實,咱們的複製剪切板需求很是簡單,而clipboard.js還停留在html,jquery模式,雖然擁有不少定義方式,可是咱們徹底用不到。
heyui組件庫直接提供一個單獨的方法,使用簡練。
this.$Clipboard({
text: '測試==複製至剪切板的文本==測試',
showSuccessTip: 'Copy Success'
});
複製代碼
相關文檔: Clipboard 複製剪切板
其實,這是一個很是方便的功能,好比說,分頁加載後滾動至頭部,切換頁面時切換至頭部。
不須要本身寫繁瑣的scroll方法,並自帶time參數,設定滾動特效。
相關文檔: ScrollIntoView
除了以上說明的那些獨特的功能,咱們還擁有一個完整的admin系統。
說了這麼多,還有更多的內容等着你去發現。
github:github.com/heyui/heyui
期待你的star✨✨✨