Vue前端开发-Vant之Layout组件

在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>