基本用法
1. 安装 Vant4 和 Layout 组件：
确保你已经安装了 Vant4 和相关的样式：
npm install vant@next
2. 引入 Layout 组件：
在需要使用 Layout 的组件中，引入 Layout 组件：
<template>
<van-row>
<van-col span="24">内容</van-col>
</van-row>
</template>
常见配置选项
以下是一些常见的 Layout 配置选项：
- van-row： 行容器，用于包裹 van-col 组件。
<template>
<van-row>
<van-col span="24">内容</van-col>
</van-row>
</template>
- van-col： 列元素，用于布局内容。span 属性表示列所占的栅格数，可以是 1-24 之间的任意值。
<template>
<van-row>
<van-col span="12">左侧内容</van-col>
<van-col span="12">右侧内容</van-col>
</van-row>
</template>
- offset： 列偏移，用于设置列元素向右偏移的栅格数。
<template>
<van-row>
<van-col span="8">左侧内容</van-col>
<van-col span="8" :offset="8">右侧内容</van-col>
</van-row>
</template>
- align： 垂直对齐方式，可选值为 'top'、'middle'、'bottom'。
<template>
<van-row align="middle">
<van-col span="24">居中对齐</van-col>
</van-row>
</template>
- justify： 水平对齐方式，可选值为 'start'、'center'、'end'、'space-around'、'space-between'。
<template>
<van-row justify="space-around">
<van-col span="6">1</van-col>
<van-col span="6">2</van-col>
<van-col span="6">3</van-col>
</van-row>
</template>
- gutter： 栅格间距，可以是数字或对象，例如 { xs: 8, sm: 16, md: 24, lg: 32 }。
<template>
<van-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32 }">
<van-col span="8">1</van-col>
<van-col span="8">2</van-col>
<van-col span="8">3</van-col>
</van-row>
</template>
这只是 Vant4 中 Layout 布局组件的一些基本用法和配置选项。你可以根据项目需要，查阅 Vant4 官方文档以获取更多详细信息和高级用法。
转载请注明出处：http://www.zyzy.cn/article/detail/5794/Vant