Vue中Layout內(nèi)部布局el-row、el-col的實(shí)現(xiàn)

更新時(shí)間：2024年07月15日 10:29:12 作者：富士康質(zhì)檢員張全蛋

layout是一種非常方便的布局方式,本文主要介紹了Vue中Layout內(nèi)部布局el-row、el-col的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下

基礎(chǔ)布局

使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。

通過 ?row ?和 ?col ?組件，并通過 ?col ?組件的 ?span ?屬性我們就可以自由地組合布局。

這種最簡(jiǎn)單，外面有一層row，說明四個(gè)col都在一行里面，也就是四列都在一行里面。

局部布局 [el-row]

el-row是控制一行一行的，el-col是控制一列一列的。span其實(shí)它會(huì)將整個(gè)瀏覽器作為24個(gè)格柵。如果每個(gè)都是6那么就排滿了

外面有一層，其實(shí)是一個(gè)row，外面有一層row，其實(shí)是一行，這四個(gè)col（也就是四列）都在一行里面。

每一列有個(gè)參數(shù)6，它會(huì)將整個(gè)瀏覽器的寬度作為24個(gè)格柵。如果大于24就排滿了，就會(huì)另起一行。

一個(gè)格柵是24個(gè)格子，:span="6"其實(shí)就是控制格柵占用的幾個(gè)格子。gutter="20" 每個(gè)col之間的間距，間距為x px像素。

        <el-header style="flex:1">
              <el-row>
                <el-col :span="24" style="background-color: yellow;">123</el-col>
              </el-row>
              <el-row :gutter="35">
                <el-col :span="6" style="background-color: red;">123</el-col>
                <el-col :span="6" style="background-color: green;">123</el-col>
                <el-col :span="6" style="background-color: blue;">123</el-col>
                <el-col :span="6" style="background-color: burlywood;">123</el-col>
              </el-row>
        </el-header>

如果超過24了，那么就另外啟動(dòng)一行來擺放。

        <el-header style="flex:1">
              <el-row>
                <el-col :span="24" style="background-color: yellow;">123</el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :span="6" ><div style="background-color: red;">123</div></el-col>
                <el-col :span="16"><div style="background-color: green;">123</div></el-col>
                <el-col :span="1"><div style="background-color: blue;">123</div></el-col>
                <el-col :span="1"><div style="background-color: burlywood;">123</div></el-col>
              </el-row>
        </el-header>

offset是左側(cè)的間隔格數(shù)

        <el-header style="flex:1">
              <el-row>
                <el-col :span="24" style="background-color: yellow;">123</el-col>
              </el-row>
              <el-row :gutter="15">
                <el-col :offset="1" :span="6" ><div style="background-color: red;">123</div></el-col>
                <el-col :span="16"><div style="background-color: green;">123</div></el-col>
                <el-col :span="1"><div style="background-color: blue;">123</div></el-col>
                <el-col :span="1"><div style="background-color: burlywood;">123</div></el-col>
              </el-row>
        </el-header>

下面el-col里面放置圖標(biāo)按鈕，這里一個(gè)方法是控制它的折疊的。這里沒有使用button去實(shí)現(xiàn)，而是使用了div去實(shí)現(xiàn)，div里面放了一個(gè)圖標(biāo)去實(shí)現(xiàn)類似按鈕的東西。不是純使用按鈕去實(shí)現(xiàn)的，這樣也是可以的。

很靈活，想怎么組合就可以怎么組合。這里還需要使用css去將其處理一下

                        <el-col :span="1">
                            <div class="header-collapse" @click="onCollapse">
                                <el-icon><component :is="isCollapse ? 'expand':'fold'"/> </el-icon>
                            </div>
                        </el-col>


   .is-collapse{
    display: none;
   }


    methods:{
       //控制折疊 true被折疊
       onCollapse(){
        //展開
          if(this.isCollapse){
             this.asideWidth = '220px'
             this.isCollapse = false
          }else{
        //折疊
            this.asideWidth = '64px'
            this.isCollapse = true
          }
       }

    }

圖標(biāo)的大小也是front-size來調(diào)整的

到此這篇關(guān)于Vue中Layout 內(nèi)部布局el-row、el-col的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue el-row和el-col內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: