HeyUI元件庫按需載入功能上線,盤點HeyUI元件庫有哪些獨特功能?
HeyUI元件庫
如果你還不瞭解heyui元件庫,歡迎來我們的官網或者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";
其他的元件載入請參考以下檔案: https://github.com/heyui/heyui/blob/master/src/components.js
盤點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:https://github.com/heyui/heyui
期待你的star✨✨✨
相關連結
- 官網
-
相關推薦
HeyUI元件庫按需載入功能上線,盤點HeyUI元件庫有哪些獨特功能?
HeyUI元件庫 如果你還不瞭解heyui元件庫,歡迎來我們的官網或者github參觀。 官網 github
基於webpack實現react元件的按需載入
隨著web應用功能越來越複雜,模組打包後體積越來越大,如何實現靜態資源的按需載入,最大程度的減小首頁載入模組體積和首屏載入時間,成為模組打包工具的必備核心技能。 webpack作為當下最為流行的模組打包工具,成為了react、vue等眾多熱門框架的官方推薦打包工具。其提供的Code Splitt
antd圖示庫按需載入的外掛實現
![](https://img2020.cnblogs.com/blog/2029875/202007/2029875-20200706164008216-126977204.png) ### 前景概要 antd是阿里出品的一款基於antd的UI元件庫,使用簡單,功能豐富,被廣泛應用在中臺專案開發中,雖然也
jQuery:實現圖片按需載入的方法,當要顯示內容的高度超過了頁面的高度,按需載入,根據滾動條的位置來判斷頁面顯示的內容
實現圖片按需載入的方法,當要顯示內容的高度超過了頁面的高度,按需載入,根據滾動條的位置來判斷頁面顯示的內容 這個類似於京東或淘寶頁面,根絕頁面的滾動,顯示下面的內容 如下圖所示,一開始並不是所有的圖片都顯示,當滾動條移動到頁面最下面的時候,再顯示下面的內容 解決思路:通過判斷滾動條是
Vue.js中用webpack合併打包多個元件並實現按需載入
對於現在前端外掛的頻繁更新,所以多多少少要對元件化有點了解,下面這篇文章主要給大家介紹了在Vue.js中用webpack合併打包多個元件並實現按需載入的相關資料,需要的朋友可以參考下。 前言 隨著移動裝置的升級、網路速度的提高,使用者對於web應用的要求越來越高,web
React學習之旅----按需載入Antd UI元件及自定義主題
package.json "babel": { "presets": [ "react-app" ], "plugins": [ [ "import", { "libraryName": "a
vue專案實現按需載入的3種方式:vue非同步元件、es提案的import()、webpack的require.ensure()
1. vue非同步元件技術 vue-router配置路由,使用vue的非同步元件技術,可以實現按需載入。 但是,這種情況下一個元件生成一個js檔案。 舉例如下: { path: '/promisedemo', na
vue專案優化之按需載入元件-使用webpack require.ensure
用 vue-cli構建的專案,在 預設情況下 ,執行 npm run build 會將所有的js程式碼打包為一個整體, 打包位置是 dist/static/js/app.[contenthash].js 類似下面的路由程式碼 router/index.j
按需載入iviei元件時,引入vue專案報iview is not defined解決辦法(使用vue-vli + iview)
解決方法 npm 下載(我使用了淘寶映象): cnpm install iview --save cnpm install babel-plugin-import --save-dev .babelrc檔案 { "presets": [ ["env", {
vue專案引用 iView 元件——全域性安裝與按需載入
隨著Vue框架的熱度,出現了不少基於Vue的UI元件庫,這次專案用到了 iView 這個元件庫。使用方法官網很詳細。 官網:https://www.iviewui.com/ 這篇文章主要是記錄一下npm 全域性安裝以及按需引用的用法。 一、全域性引用 ①、先安裝iview&nbs
路由元件按需載入的幾種方法
在Vue專案中,一般使用vue-cli構建專案後,我們會在Router資料夾下面的index.js裡面引入相關的路由元件,如: import Hello from '@/components/Hello' import Boy from '@/components/Boy
React第三方元件1(路由管理之Router的使用⑤按需載入-下)
微信公眾號首發 本教程總共6篇,每日更新一篇,請關注我們!你可以進入歷史訊息檢視以往文章,也敬請期待我們的新文章! 1、React第三方元件1(路由管理之Router的使用①簡單使用)---2018.01.22 2、React第三方元件1(路由管理之Ro
vue2+iview+require實現AMD模式下的元件化開發、按需載入
1、最近專案遇到的需求:不使用webpack, 採用老設計模式AMD,實現按需載入,元件化開發 css樣式採用less模組化,未在webpack中配置less-loader,藉助less.js在客戶端編譯(此方法不可取,需優化) 3、設計思路:
react-router4的按需載入實踐(基於create-react-app和Bundle元件)
最近在網上也看到了react-router4的好多種按需載入的方法。 雖然自己的專案不大,但是也要區分前臺和後臺,如果讓訪問前臺的使用者也載入了後臺的js程式碼,還是很影響體驗的,所以挑了一種按需載入的方法進行實踐(基於create-react-app和B
vue-cli按需載入,懶載入元件
vue來做一個單頁面應用,當我們的專案越來越大,元件越來越多的時候,首次啟動專案戶特別慢,就算做一個載入框,蒙層之類的,體驗也不會好,這個時候就需要按需載入1.什麼叫按需載入 所謂按需載入,顧名思義,就是當我需要的時候再給我,我不要的時候,你就老老實實待
組件庫按需加載 借助babel-plugin-import實現
introduce 內容 com control ati intro tab style src 前段時間一直在基於webpack進行前端資源包的瘦身。在項目中基於路由進行代碼分離,http://www.cnblogs.com/legu/p/7251562.html。對
react路由按需載入方法
使用router4之後以前的按需載入方法require.ensure 是不好使了。 所以我們改用react-loadable外掛做按需載入。 第一步: yarn add react-loadable --save-dev 第二步 建立一個 loadable檔案 程式碼如下: imp
webpack3按需載入遇到的問題
這節主要說的是自定義webpack之關於配置按需載入遇到的問題 - AsyncComponent.js import React, {Component} from "react"; export default function asyncComponent(importCom
按需載入babel-polyfill
babel-polyfill Babel預設只轉換JS語法,而不轉換新的API,比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域性物件,以及一些定義在全域性物件上的方法(比如Object.assign)都不會轉
React引入AntD按需載入報錯
背景:React使用create-react-app腳手架建立,然後yarn run eject暴露了配置之後修改less配置, 需求:實現antd元件按需載入與修改主題。 一開始是按照webpack.config.dev.js檔案中的配置進行less的配置。 可以看到腳手架建立的config檔案為