Vue前端开发-Vant之Layout组件

本文链接：https://blog.csdn.net/chuanshixx/article/details/145778074

在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