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

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

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

基礎(chǔ)布局

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

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

這種最簡單，外面有一層row，說明四個col都在一行里面，也就是四列都在一行里面。

局部布局 [el-row]

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

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

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

一個格柵是24個格子，:span="6"其實就是控制格柵占用的幾個格子。gutter="20" 每個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了，那么就另外啟動一行來擺放。

        <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)按鈕，這里一個方法是控制它的折疊的。這里沒有使用button去實現(xiàn)，而是使用了div去實現(xiàn)，div里面放了一個圖標(biāo)去實現(xiàn)類似按鈕的東西。不是純使用按鈕去實現(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)整的