当前位置：首页 > article >正文

Vue前端开发-Vant之Layout组件

article 2025/2/23 4:34:33

在Vant 中，Layout组件用于元素的响应式布局，分别由van-row和van-col两个组件来实现，前者表示行，后者被包裹在van-row组件中，表示列，共有24列栅格组成，在van-col组件中，span属性表示所占列的比例，offset属性表示列的偏移量。

此外，van-row和van-col其他属性分别如下表11-4、11-5所示。
在这里插入图片描述

　　接下来通过一个完整的案例来演示使用van-row和van-col组件布局效果。

实例11-3 Layout组件

1. 功能描述

创建一个页面，使用Vant中的van-row和van-col组件，分别显示三列布局、带偏移量的布局和居中显示的布局效果。

2. 实现代码

在项目的components 文件夹中，添加一个名为“Layout”的.vue文件，该文件的保存路径是“components/ch11/base/”，在文件中加入如清单11-3所示代码。

代码清单11-3 Layout.vue代码

<template>
    <h3>Layout 组件</h3>
    <div class="row">
        <p>基础用法</p>
        <van-row>
            <van-col class="col" span="8">span: 8</van-col>
            <van-col class="col-m" span="8">span: 8</van-col>
            <van-col class="col" span="8">span: 8</van-col>
        </van-row>
    </div>
    <div class="row">
        <p>列间偏移量</p>
        <van-row>
            <van-col class="col" span="8">span: 8</van-col>
            <van-col span="12" offset="4" class="col-m">
offset: 4, span: 12
</van-col>
        </van-row>
    </div>
    <div class="row">
        <p>对齐方式</p>
        <van-row justify="center">
            <van-col class="col" span="6">span: 6</van-col>
            <van-col class="col-m" span="6">span: 6</van-col>
            <van-col class="col" span="6">span: 6</van-col>
        </van-row>
    </div>
</template>
<script>
export default {

}
</script>
<style scoped>
.row {
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: solid 1px #eee;
}

.col {
    background-color: #eee;
    padding: 5px 0;
    text-align: center;
}

.col-m {
    background-color: #ccc;
    padding: 5px 0;
    text-align: center;
}
</style>