HeyUI組件庫按需加載功能上線，盤點HeyUI組件庫有哪些獨特功能？

HeyUI組件庫

若是你還不瞭解heyui組件庫，歡迎來咱們的官網或者github參觀。

• 官網
• github

固然，若是能給咱們一顆✨✨✨，那是最讚的了！

按需加載

當heyui組件庫的組件愈來愈多的時候，按需加載的功能終於上線了。

話很少說，先把按需加載的使用方式放出來。

在線示例

按需加載在線示例

以此圖爲例，按需加載後，js與css的大小將大幅度減少。

示例代碼

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.less

@import (less) "../../themes/common.base.less";
@import (less) "../../themes/components/dropdown-menu.less";
複製代碼

其中，common.base.less將引用系統的一些基礎樣式，其餘的組件須要本身加載樣式。

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…

盤點HeyUI組件庫的獨特功能

既然heyui已經支持按需加載了，那接下來就介紹一下系統的一些獨特功能。

在已經使用iviewui或者elementui的前提下，你也能夠選擇單獨使用這些功能。

AutoComplete 模糊匹配

其實AutoComplete組件，iview與elementui都有相關的功能，可是從功能性來考慮，heyui幾乎將AutoComplete的功能全覆蓋了。

好比說：

• 綁定值使用key或者完整對象，搜索的時候，獲取選擇的對象。
• 多選，知足選擇員工等需求
• 更加完整的事件，數據的改變有哪些事件觸發：enter, blur, picker, remove, clear
• 支持 mustMatch=false 屬性

若是你有相似的需求，能夠選擇使用heyui的AutoComplete。

相關文檔: AutoComplete文檔

DateFullRangePicker 超級日期範圍控件

覆蓋日期範圍選擇的全部需求，而且自動將結束日期+1，適配後端的小於查詢。

相關文檔: DateFullRangePicker文檔

Tree 樹

其實，全部的組件都擁有Tree組件，可是heyui的Tree組件擁有更加細緻的處理。

heyui的Tree組件擁有三種選擇模式：

• all: 只有子集全選才會選中父級（好比：部門選擇）
• some: 只要子集有選擇，父級就會選中（好比：菜單選擇，權限選擇）
• independent: 子父選擇沒有相關性

相關文檔: Tree文檔

TreePicker

其實，在系統開發過程當中，TreePicker是一個需求比較強烈的功能。

雖然TreePicker組件也沒有常常使用，可是，若是有相關需求的時候，能有一個完整的組件提供選擇是一件很是棒的事情。

而且，咱們的TreePicker組件提供 單選，多選，覆蓋需求的每一個角落。

相關文檔: TreePicker文檔

Category

Category組件，是其餘組件庫都沒有的組件。

主要是用來知足一些大量標籤數據的選擇，具備很強的通用性。

好比，在咱們的應用中，用來選擇不少信息的行業標籤。

相關文檔: Category文檔

CategoryPicker

CategoryPicker組件，大概是三級地址聯動的最佳方案選擇了吧，咱們提供了很是強大的功能定製。

包括：

• 單選，多選
• 是否顯示全部的層級
• 展現子集數量
• 可使用綁定key，也能夠是對象數據。
• 分佈異步獲取數據
• 數據 selectable, checkable 控制

相關文檔: CategoryPicker文檔

DropdownCustom 自定義下拉控件

提供自定義Dropdown，用戶能夠根據本身的需求定製不一樣的下拉組件。

相關文檔: DropdownCustom文檔

其中，還包括右鍵觸發的操做，以heyui-admin系統的tabs爲例。

Avatar 頭像信息

其實，其餘組件庫也有頭像組件。

可是，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}`;
});
複製代碼

ImagePreview 圖片預覽

這種其實包含兩個部分：

• 圖片列表展現
• 圖片預覽功能

圖片列表

圖片列表適用於一些基本的圖片展現需求，能夠自定義圖片大小以及圖片間距。

圖片預覽

圖片預覽的功能在系統的各個角落都需求很是強烈。

目前開源比較好的是lightbox2，可是，lightbox2依賴於jquery，爲了一個圖片預覽，還須要加載jquery，很是的麻煩。

因此，咱們本身開發了一個圖片預覽功能，而且直接經過方法調用，比lightbox2的定義更加方便便捷。

相關文檔: ImagePreview 圖片預覽

TextEllipsis 超出文本省略

超出文本省略的功能，其實也是屬於系統需求比較強烈，而使用css也很難知足的功能。

咱們開發的組件是一套適用性強，而且可以完美知足此類需求的功能。

以下圖所示，咱們擁有如下功能：

• 自定義前綴
• 自定義後綴
• 配合需求完成展開收起的操做
• 若是產生省略，則tooltip提示，若是沒有產生省略，則不出提示

相關文檔: TextEllipsis 超出文本省略

Clipboard 複製剪切板

不知道你是否還在使用clipboard.js，其實，咱們的複製剪切板需求很是簡單，而clipboard.js還停留在html，jquery模式，雖然擁有不少定義方式，可是咱們徹底用不到。

heyui組件庫直接提供一個單獨的方法，使用簡練。

this.$Clipboard({
    text: '測試==複製至剪切板的文本==測試',
    showSuccessTip: 'Copy Success'
});
複製代碼

相關文檔: Clipboard 複製剪切板

ScrollIntoView 滾動至視圖內

其實，這是一個很是方便的功能，好比說，分頁加載後滾動至頭部，切換頁面時切換至頭部。

不須要本身寫繁瑣的scroll方法，並自帶time參數，設定滾動特效。

相關文檔: ScrollIntoView

HeyUI Admin

除了以上說明的那些獨特的功能，咱們還擁有一個完整的admin系統。

在線地址

最後

說了這麼多，還有更多的內容等着你去發現。

github：github.com/heyui/heyui

期待你的star✨✨✨

相關連接

• 官網
• github