Vue組件：網格系統，row & col

預覽樣式如下：

 

 代碼如下：

    <g-row class="demoRow" align="center" gutter="20">
        <g-col span="8"><div class="demoCol">hi</div></g-col>
        <g-col span="8"><div class="demoCol">hi</div></g-col>
    </g-row>
    <g-row class="demoRow" align="left" gutter="20">
        <g-col span="6"><div class="demoCol">hi</div></g-col>
        <g-col span="6"><div class="demoCol">hi</div></g-col>
    </g-row>
    <g-row class="demoRow" align="right" gutter="20">
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
    </g-row>
    <g-row class="demoRow" gutter="20">
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
        <g-col span="4"><div class="demoCol">hi</div></g-col>
    </g-row>

注意：

1.實現 div 分成各等分（默認最多24分）
2.gutter 縫隙

 

 

或者使用element-ui 的響應式柵格布局

要注意的問題

• xs sm md lg xl五個尺寸的默認值均為24，意味着，任何一個尺寸屬性不設置，則該尺寸下響應式寬度為24，這與bootstrap不同
• 尺寸屬性可以設為0，則該el-col不顯示
• 不論尺寸屬性設置為多少，若el-col中沒有任何內容則該el-col不顯示（內部元素為空也不行，如<div></div> <span></span>）

<el-row>
    <el-col :xs="12" :sm="9" :md="6" :lg="0" :xl="0">123</el-col>
    <el-col :xs="12" :sm="15" :md="18" :lg="21" :xl="24">456</el-col>
</el-row>

• offset 屬性是沒有響應式的，可以通過加入一個帶一個空格的<el-col>解決： <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="3">&nbsp;</el-col>

可以把固定的響應式布局作為組件

Vue.component('my-container',{
    template:`
    <el-row>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
        <el-col :xs="24" :sm="22" :md="20" :lg="18" :xl="18">
            <slot></slot>
        </el-col>
        <el-col :xs="0" :sm="1" :md="2" :lg="3" :xl="4">&nbsp;</el-col>
    </el-row>
    `
});

這樣就可以使用了

<my-container>
    <div style="background: red">內容</div>
</my-container>`

 

來源於： 傳送門 + 傳送門