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

vvpvvp發表於2019-05-22
UI元件

HeyUI元件庫

如果你還不瞭解heyui元件庫，歡迎來我們的官網或者github參觀。

當然，如果能給我們一顆✨✨✨，那是最讚的了！

按需載入

當heyui元件庫的元件越來越多的時候，按需載入的功能終於上線了。

話不多說，先把按需載入的使用方式放出來。

線上示例

按需載入線上示例

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

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

示例程式碼

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文件

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

DateFullRangePicker 超級日期範圍控制元件

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

相關文件: DateFullRangePicker文件

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

Tree 樹

其實，所有的元件都擁有Tree元件，但是heyui的Tree元件擁有更加細緻的處理。

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

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

相關文件: Tree文件

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

TreePicker

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

雖然TreePicker元件也沒有經常使用，但是，如果有相關需求的時候，能有一個完整的元件提供選擇是一件非常棒的事情。

並且，我們的TreePicker元件提供 單選，多選，覆蓋需求的每個角落。

相關文件: TreePicker文件

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

Category

Category元件，是其他元件庫都沒有的元件。

主要是用來滿足一些大量標籤資料的選擇，具有很強的通用性。

比如，在我們的應用中，用來選擇很多資訊的行業標籤。

相關文件: Category文件

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

CategoryPicker

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

包括：

  • 單選，多選
  • 是否顯示所有的層級
  • 展示子集數量
  • 可以使用繫結key，也可以是物件資料。
  • 分佈非同步獲取資料
  • 資料 selectable, checkable 控制

相關文件: CategoryPicker文件

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

DropdownCustom 自定義下拉控制元件

提供自定義Dropdown，使用者可以根據自己的需求定製不同的下拉元件。

相關文件: DropdownCustom文件

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

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

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

Avatar 頭像資訊

其實，其他元件庫也有頭像元件。

但是，heyui的頭像元件更加關注的是頭像的排版結合，十分適用於系統中的各種資訊展示。

相關文件: Avatar文件

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

並且，我們還提供了全域性自定義處理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 圖片預覽

這種其實包含兩個部分：

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

圖片列表

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

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

圖片預覽

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

目前開源比較好的是lightbox2，但是，lightbox2依賴於jquery，為了一個圖片預覽，還需要載入jquery，非常的麻煩。

所以，我們自己開發了一個圖片預覽功能，並且直接通過方法呼叫，比lightbox2的定義更加方便便捷。

相關文件: ImagePreview 圖片預覽

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

TextEllipsis 超出文字省略

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

我們開發的元件是一套適用性強，並且能夠完美滿足此類需求的功能。

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

  • 自定義字首
  • 自定義字尾
  • 配合需求完成展開收起的操作
  • 如果產生省略，則tooltip提示，如果沒有產生省略，則不出提示

相關文件: TextEllipsis 超出文字省略

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

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

Clipboard 複製剪下板

不知道你是否還在使用clipboard.js，其實，我們的複製剪下板需求非常簡單，而clipboard.js還停留在html，jquery模式，雖然擁有很多定義方式，但是我們完全用不到。

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

this.$Clipboard({
    text: '測試==複製至剪下板的文字==測試',
    showSuccessTip: 'Copy Success'
});
複製程式碼

相關文件: Clipboard 複製剪下板

ScrollIntoView 滾動至檢視內

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

不需要自己寫繁瑣的scroll方法，並自帶time引數，設定滾動特效。

相關文件: ScrollIntoView

HeyUI Admin

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

線上地址

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

最後

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

github：github.com/heyui/heyui

期待你的star✨✨✨

相關連結

相關文章