「真相定律」之Layout組件

Layout組件

其實HeyUI組件庫已經發布一年半了，而我一直都沒有補充Layout組件。

至於一直不開發的緣由，主要是由於我以爲系統的佈局都會由於定製化而發生變化，也會跟隨着設計的變化而變化，而Layout固定的組合方式沒法知足實際的需求。

其實，我發現，有不少人的想法和我如出一轍，以爲layout的總體實用性不高。

而開始寫Layout的緣由有兩個：

一是隨着heyui-admin的架構在不斷的成熟，layout這一塊一直都是使用本身寫的css控制的，改到menu摺疊的時候，就以爲實例的代碼有點多了，參考了一下ant-design的設置，以爲能夠考慮把Layout結合進來。

二是因爲不少後端開發的小夥伴的實際需求比較迫切，對於他們來講，系統佈局不須要可擴展，他們須要一個簡單的框架，直接搭建起來。

話很少說，先把效果圖發出來：

上中下佈局

上左右佈局

左上下佈局

具體文檔，請戳至下面的連接查看：

戳我去：HeyUI-Layout 佈局

Layout開發心理路程

哎~ 好像還挺簡單
哎~ 我靠~ 這麼方便
哎~ 固定header控制好便捷
哎~ 全局定義變量~ 我靠~ 好爽 😱
~ 真香 😂😂😂😂😂

Layout組件在開發出來的時候，我發現，其實真的很實用，能覆蓋平常系統佈局大部分場景，並且比本身開發還要快速，好調整。

Layout組件說明

全局變量定義

組件在var.less中配置三個尺寸，分別爲：

• @layout-header-height: 佈局中Header的高度，默認值爲: 64px
• @layout-sider-width: 佈局中Sider的寬度，默認值爲: 200px
• @layout-sider-collapse-width: 佈局中Sider收起的寬度，默認值爲: 70px

你能夠經過修改這三個參數達到設計師對系統佈局的要求

組件

Layout總共包含5個組件:

• Layout
• Sider
• HHeader: 爲了防止和一些系統定義的Header組件衝突
• HFooter: 爲了防止和一些系統定義的Footer組件衝突
• Content

如下圖的代碼爲例：

<Layout>
  <Sider>Sider</Sider>
  <Layout>
    <HHeader>Header</HHeader>
    <Content>Content</Content>
    <HFooter>Footer</HFooter>
  </Layout>
</Layout>

複製代碼

最終排版效果以下圖所示：

Layout參數

Layout組件提供如下三種參數：

• headerFixed: 是否固定頭部
• siderFixed: 是否固定側邊欄
• siderCollapsed: 是否收起側邊欄

在不一樣的排版方式中，都能很好的完成頁面佈局的處理。

應用

目前Layout已經在hey-admin項目中應用了，你們能夠經過連接直接訪問線上demo：

admin.heyui.top/

關於Hey-Admin

HeyUI組件庫的admin框架正在開發中，但願你們多多關注。

github.com/heyui/heyui…

關於HeyUI

但願更多的人能參與到咱們的開源項目中。

請感興趣的朋友添加微信號：heyui-robot

咱們會按期拉人入羣。

官網: HEYUI，一個基於Vue.js的高質量UI組件庫

Github倉庫：heyui/heyui