介紹

HeyUI 是一套基於 Vue2.0 的開源 UI 組件庫，主要服務於一些中後臺產品。HeyUI提供的是一整套解決方案，所有的組件提供全局的可配置模式。集成主流的國際化方案以及更加人性化的還支持VSCode擴展。

官網

<code>文檔：https://www.heyui.top//<code>

<code>Gitee：https://gitee.com/heyui/heyui/<code>

<code>Github：https://github.com/heyui/heyui/<code>

安裝

推薦使用 npm 的方式安裝。

<code>npm install heyui/<code>

示例

通過引用HeyUI，我們可以簡單的寫出一個應用界面。

<code><template>  
    <button>Hi!/<button>    <modal>      
Hello HeyUI!
    /<modal>  
/<template>/<code>

支持環境

現代瀏覽器和 IE9 及以上。HeyUI支持 Vue.js 2.x版本

組件預覽

以下組件預覽不是所有都進行了截圖，只是大致將一些組件展示出來：

Input 輸入框

Radio 單選

Checkbox 多選

Select 下拉選擇

AutoComplete 模糊匹配

NumberInput 數字輸入

TagInput 標籤輸入框

HSwitch 開關

Slider 滑塊

Rate 評分

SwitchList 選項切換

Form 表單

DatePicker 日期選擇

TimePicker 時間選擇

DatetimePicker 日期時間選擇

DateRangePicker 日期範圍選擇

DateFullRangePicker 超級日期

Search 搜索框

Uploader 上傳

Tree 樹

TreePicker 樹選擇

Category 分類選擇

CategoryPicker 選擇

Transfer 穿梭框

ColorPicker 顏色選擇器

Breadcrumb 麵包屑

Menu 菜單

Pagination 分頁

Tabs 標籤頁

Steps 步驟條

DropdownMenu 下拉菜單

DropdownCustom 自定義下拉

Table 表格

Avatar 頭像信息

Badge 微標數

Carousel 走馬燈

Collapse 摺疊面板

Circle 進度環

Progress 進度條

Loading 加載中

LoadingBar 加載進度條

Skeleton 加載佔位圖

Timeline 時間軸

ImagePreview 圖片預覽

TextEllipsis 超出文本省略

Message 提示

Notice 通知

Modal 彈出框

Tooltip 氣泡提示

Poptip 確定提示

Clipboard 複製剪切板

Affix 圖釘

BackTop 返回頂部

Panel 面板

Tag 標籤

集成解決發難Heyui-admin

<code>https://admin.heyui.top//<code>

在線運行

總結

Heyui是一個高質量的組件一點也不為過，不僅如此，其還集成了一套適用於大多數中後臺的完整集成解決方案，上手很快，而且組件非常豐富，大多數業務場景都能覆蓋，非常值得嘗試，enjoy it！

閱讀更多 最美分享Coder 的文章

關鍵字: 瀏覽器 組件 功能強大