Vue组件：网格系统，row & col

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

预览样式如下：

 代码如下：

    <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 的响应式栅格布局

要注意的问题

  • xssmmdlgxl五个尺寸的默认值均为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>`

来源于：传送门 +传送门

以上是 Vue组件：网格系统，row & col 的全部内容， 来源链接： utcz.com/z/378919.html

回到顶部