資訊專欄INFORMATION COLUMN
摘要：測(cè)試復(fù)制至剪切板的文本測(cè)試相關(guān)文檔復(fù)制剪切板滾動(dòng)至視圖內(nèi)其實(shí)，這是一個(gè)非常方便的功能，比如說(shuō)，分頁(yè)加載后滾動(dòng)至頭部，切換頁(yè)面時(shí)切換至頭部。
HeyUI組件庫(kù)如果你還不了解heyui組件庫(kù)，歡迎來(lái)我們的官網(wǎng)或者github參觀。
官網(wǎng)
github
當(dāng)然，如果能給我們一顆???，那是最贊的了！
按需加載當(dāng)heyui組件庫(kù)的組件越來(lái)越多的時(shí)候，按需加載的功能終于上線了。
話不多說(shuō)，先把按需加載的使用方式放出來(lái)。
在線示例按需加載在線示例
以此圖為例，按需加載后，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將引用系統(tǒng)的一些基礎(chǔ)樣式，其他的組件需要自己加載樣式。
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";
其他的組件加載請(qǐng)參考以下文件： github.com/heyui/heyui…
盤點(diǎn)HeyUI組件庫(kù)的獨(dú)特功能既然heyui已經(jīng)支持按需加載了，那接下來(lái)就介紹一下系統(tǒng)的一些獨(dú)特功能。
在已經(jīng)使用iviewui或者elementui的前提下，你也可以選擇多帶帶使用這些功能。
AutoComplete 模糊匹配其實(shí)AutoComplete組件，iview與elementui都有相關(guān)的功能，但是從功能性來(lái)考慮，heyui幾乎將AutoComplete的功能全覆蓋了。
比如說(shuō)：
綁定值使用key或者完整對(duì)象，搜索的時(shí)候，獲取選擇的對(duì)象。
多選，滿足選擇員工等需求
更加完整的事件，數(shù)據(jù)的改變有哪些事件觸發(fā)：enter, blur, picker, remove, clear
支持 mustMatch=false 屬性
如果你有類似的需求，可以選擇使用heyui的AutoComplete。
相關(guān)文檔: AutoComplete文檔
DateFullRangePicker 超級(jí)日期范圍控件
覆蓋日期范圍選擇的所有需求，并且自動(dòng)將結(jié)束日期+1，適配后端的小于查詢。
相關(guān)文檔: DateFullRangePicker文檔
Tree 樹(shù)
其實(shí)，所有的組件都擁有Tree組件，但是heyui的Tree組件擁有更加細(xì)致的處理。
heyui的Tree組件擁有三種選擇模式：
all: 只有子集全選才會(huì)選中父級(jí)（比如：部門選擇）
some: 只要子集有選擇，父級(jí)就會(huì)選中（比如：菜單選擇，權(quán)限選擇）
independent: 子父選擇沒(méi)有相關(guān)性
相關(guān)文檔: Tree文檔
TreePicker
其實(shí)，在系統(tǒng)開(kāi)發(fā)過(guò)程中，TreePicker是一個(gè)需求比較強(qiáng)烈的功能。
雖然TreePicker組件也沒(méi)有經(jīng)常使用，但是，如果有相關(guān)需求的時(shí)候，能有一個(gè)完整的組件提供選擇是一件非常棒的事情。
并且，我們的TreePicker組件提供 單選，多選，覆蓋需求的每個(gè)角落。
相關(guān)文檔: TreePicker文檔
Category
Category組件，是其他組件庫(kù)都沒(méi)有的組件。
主要是用來(lái)滿足一些大量標(biāo)簽數(shù)據(jù)的選擇，具有很強(qiáng)的通用性。
比如，在我們的應(yīng)用中，用來(lái)選擇很多信息的行業(yè)標(biāo)簽。
相關(guān)文檔: Category文檔
CategoryPicker
CategoryPicker組件，大概是三級(jí)地址聯(lián)動(dòng)的最佳方案選擇了吧，我們提供了非常強(qiáng)大的功能定制。
包括：
單選，多選
是否顯示所有的層級(jí)
展示子集數(shù)量
可以使用綁定key，也可以是對(duì)象數(shù)據(jù)。
分布異步獲取數(shù)據(jù)
數(shù)據(jù) selectable, checkable 控制
相關(guān)文檔: CategoryPicker文檔
DropdownCustom 自定義下拉控件
提供自定義Dropdown，用戶可以根據(jù)自己的需求定制不同的下拉組件。
相關(guān)文檔: DropdownCustom文檔
其中，還包括右鍵觸發(fā)的操作，以heyui-admin系統(tǒng)的tabs為例。
Avatar 頭像信息
其實(shí)，其他組件庫(kù)也有頭像組件。
但是，heyui的頭像組件更加關(guān)注的是頭像的排版結(jié)合，十分適用于系統(tǒng)中的各種信息展示。
相關(guān)文檔: Avatar文檔
并且，我們還提供了全局自定義處理src的功能。
// 通過(guò)配置可以設(shè)置src的全局處理方式，比如根據(jù)width參數(shù)設(shè)置不同的圖片大小
HeyUI.config("avatar.handleSrc", (src) => {
if (!src) return "";
// this.width 可以獲取組件的參數(shù)
let width = this.width;
if (width == undefined) return src;
return `${src}");${width*2}/h/${width*2}`;
});
ImagePreview 圖片預(yù)覽
這種其實(shí)包含兩個(gè)部分：
圖片列表展示
圖片預(yù)覽功能
圖片列表適用于一些基本的圖片展示需求，可以自定義圖片大小以及圖片間距。
圖片預(yù)覽的功能在系統(tǒng)的各個(gè)角落都需求非常強(qiáng)烈。
目前開(kāi)源比較好的是lightbox2，但是，lightbox2依賴于jquery，為了一個(gè)圖片預(yù)覽，還需要加載jquery，非常的麻煩。
所以，我們自己開(kāi)發(fā)了一個(gè)圖片預(yù)覽功能，并且直接通過(guò)方法調(diào)用，比lightbox2的定義更加方便便捷。
相關(guān)文檔: ImagePreview 圖片預(yù)覽
TextEllipsis 超出文本省略
超出文本省略的功能，其實(shí)也是屬于系統(tǒng)需求比較強(qiáng)烈，而使用css也很難滿足的功能。
我們開(kāi)發(fā)的組件是一套適用性強(qiáng)，并且能夠完美滿足此類需求的功能。
如下圖所示，我們擁有以下功能：
自定義前綴
自定義后綴
配合需求完成展開(kāi)收起的操作
如果產(chǎn)生省略，則tooltip提示，如果沒(méi)有產(chǎn)生省略，則不出提示
相關(guān)文檔: TextEllipsis 超出文本省略
Clipboard 復(fù)制剪切板
不知道你是否還在使用clipboard.js，其實(shí)，我們的復(fù)制剪切板需求非常簡(jiǎn)單，而clipboard.js還停留在html，jquery模式，雖然擁有很多定義方式，但是我們完全用不到。
heyui組件庫(kù)直接提供一個(gè)多帶帶的方法，使用簡(jiǎn)練。
this.$Clipboard({
text: "測(cè)試==復(fù)制至剪切板的文本==測(cè)試",
showSuccessTip: "Copy Success"
});
相關(guān)文檔: Clipboard 復(fù)制剪切板
ScrollIntoView 滾動(dòng)至視圖內(nèi)其實(shí)，這是一個(gè)非常方便的功能，比如說(shuō)，分頁(yè)加載后滾動(dòng)至頭部，切換頁(yè)面時(shí)切換至頭部。
不需要自己寫繁瑣的scroll方法，并自帶time參數(shù)，設(shè)定滾動(dòng)特效。
相關(guān)文檔: ScrollIntoView
HeyUI Admin除了以上說(shuō)明的那些獨(dú)特的功能，我們還擁有一個(gè)完整的admin系統(tǒng)。
在線地址
最后
說(shuō)了這么多，還有更多的內(nèi)容等著你去發(fā)現(xiàn)。
github：github.com/heyui/heyui
期待你的star???
相關(guān)鏈接官網(wǎng)
github
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/6845.html
摘要：對(duì)于大中型前端項(xiàng)目為了解耦與復(fù)用，更多的公司會(huì)選擇自己封裝組件庫(kù)，那么一次引入整個(gè)組件庫(kù)必然導(dǎo)致項(xiàng)目過(guò)大，如何按需加載則必須要做前世的插件原理項(xiàng)目地址在轉(zhuǎn)碼的時(shí)候，把整個(gè)庫(kù)的引用，變?yōu)榫唧w模塊的引用。 對(duì)于大中型前端項(xiàng)目為了解耦與復(fù)用，更多的公司會(huì)選擇自己封裝組件庫(kù)，那么一次引入整個(gè)組件庫(kù)必然導(dǎo)致項(xiàng)目過(guò)大，如何按需加載則必須要做 前世 ant-design的babel插件babel-p...
摘要：前端每周清單半年盤點(diǎn)之與篇前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開(kāi)發(fā)教程工程實(shí)踐深度閱讀開(kāi)源項(xiàng)目巔峰人生等欄目。與求同存異近日，宣布將的構(gòu)建工具由遷移到，引發(fā)了很多開(kāi)發(fā)者的討論。 前端每周清單半年盤點(diǎn)之 React 與 ReactNative 篇 前端每周清單專注前端領(lǐng)域內(nèi)容，以對(duì)外文資料的搜集為主，幫助開(kāi)發(fā)者了解一周前端熱點(diǎn)；分為...
摘要：由于長(zhǎng)期苦惱于第三方庫(kù)選擇的廣大開(kāi)發(fā)者而言，這也是谷歌為我們提供的一盞明燈。手機(jī)淘寶構(gòu)架演化實(shí)踐淘寶相信都不陌生了從年開(kāi)始，從萬(wàn)增長(zhǎng)到超過(guò)億，面臨的問(wèn)題包括研發(fā)支撐所需要解決的事情各不相同。 ...
摘要：主工程具有和組件進(jìn)行綁定和解綁的功能。如下圖組件化需要考慮問(wèn)題考慮的問(wèn)題分而治之，并行開(kāi)發(fā)，一切皆組件。引用阿里的框架，通過(guò)注解方式進(jìn)行頁(yè)面跳轉(zhuǎn)。 目錄介紹 1.為什么要組件化 1.1 為什么要組件化 1.2 現(xiàn)階段遇到的問(wèn)題 2.組件化的概念 2.1 什么是組件化 2.2 區(qū)分模塊化與組件化 2.3 組件化優(yōu)勢(shì)好處 2.4 區(qū)分組件化和插件化 2.5 applicati...
閱讀 1068·2023-04-26 02:02
閱讀 2408·2021-09-26 10:11
閱讀 3561·2019-08-30 13:10
閱讀 3750·2019-08-29 17:12
閱讀 727·2019-08-29 14:20
閱讀 2195·2019-08-28 18:19
閱讀 2240·2019-08-26 13:52
閱讀 964·2019-08-26 13:43
