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

IamDLY 發布于2019-05-22 19:08 / 3429人閱讀

摘要：測試復制至剪切板的文本測試相關文檔復制剪切板滾動至視圖內其實，這是一個非常方便的功能，比如說，分頁加載后滾動至頭部，切換頁面時切換至頭部。

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}");${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

云服務器 GPU云服務器 HeyUI組件 HeyUI組件庫 HeyUI asp的組件有哪些

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6845.html

之前，我發了一些關于HeyUI組件庫的一些文章，有些人建議我把開發中遇到的問題共享出來，這一篇算是一個嘗試，看大家反饋，會有更多的開發知識共享。首先，這一篇，說的是vue開發中的深坑，并不是有一些文章寫的vue安裝失敗，模塊找不到，或者vue-router如何定義等等基礎錯誤。然后，這一篇需要閱讀者對vue有著基本的了解，并且使用過，如果你對vue還不懂，建議先收藏，以后再看。 HeyUI 如...

idealcn 2019-08-22 18:49 評論0 收藏0
組件庫按需加載借助babel-plugin-import實現

摘要：對于大中型前端項目為了解耦與復用，更多的公司會選擇自己封裝組件庫，那么一次引入整個組件庫必然導致項目過大，如何按需加載則必須要做前世的插件原理項目地址在轉碼的時候，把整個庫的引用，變為具體模塊的引用。對于大中型前端項目為了解耦與復用，更多的公司會選擇自己封裝組件庫，那么一次引入整個組件庫必然導致項目過大，如何按需加載則必須要做前世 ant-design的babel插件babel-p...

zhichangterry 2019-08-26 13:58 評論0 收藏0
前端每周清單半年盤點之 React 與 ReactNative 篇

摘要：前端每周清單半年盤點之與篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點分為新聞熱點開發教程工程實踐深度閱讀開源項目巔峰人生等欄目。與求同存異近日，宣布將的構建工具由遷移到，引發了很多開發者的討論。前端每周清單半年盤點之 React 與 ReactNative 篇前端每周清單專注前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為...

Barry_Ng 2019-08-22 10:54 評論0 收藏0
新風向！成就了Android，熱門框架排第一，你還是不夠了解它！

摘要：由于長期苦惱于第三方庫選擇的廣大開發者而言，這也是谷歌為我們提供的一盞明燈。手機淘寶構架演化實踐淘寶相信都不陌生了從年開始，從萬增長到超過億，面臨的問題包括研發支撐所需要解決的事情各不相同。 ...

sixgo 2021-09-10 10:51 評論0 收藏0
Android組件化開發實踐和案例分享

摘要：主工程具有和組件進行綁定和解綁的功能。如下圖組件化需要考慮問題考慮的問題分而治之，并行開發，一切皆組件。引用阿里的框架，通過注解方式進行頁面跳轉。目錄介紹 1.為什么要組件化 1.1 為什么要組件化 1.2 現階段遇到的問題 2.組件化的概念 2.1 什么是組件化 2.2 區分模塊化與組件化 2.3 組件化優勢好處 2.4 區分組件化和插件化 2.5 applicati...

zr_hebo 2019-08-16 14:42 評論0 收藏0