布局 Layout

布局组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

pure-row DCloud 插件市场地址pure-col DCloud 插件市场地址

基础使用

• Layout 布局包含 pure-row 和 pure-col 两个组件。

• 内部实现方式就是简单的 flex 布局，一开始不想写这么一个组件，但是想写代码的时候偷点懒，快速布局，就弄了这么一个组件。

• 该组件未采用传统的 24 栅格系统，而是采用 100 栅格系统，支持浮点数，我觉得这样可以更加方便的使用，想定多少栅格就定多少栅格。

• gap: 设置栅格之间的间距。

• span: 设置栅格的宽度，等同于占总宽度的百分比，比如 span="33.333333"，表示该栅格占 33.333333% 的宽度。

<template>
    <pure-row gap="10px">
        <pure-col span="33.333333"></pure-col>
        <pure-col span="25"></pure-col>
        <pure-col span="10"></pure-col>
    </pure-row>
</template>

偏移量

• offset: 设置栅格的偏移量，其实就是 margin-left 的百分比值。

<template>
    <pure-row gap="10px">
        <pure-col span="10" offset="10"></pure-col>
        <pure-col span="10" offset="10"></pure-col>
        <pure-col span="10" offset="10"></pure-col>
    </pure-row>
</template>

对齐方式

• justify: 设置栅格的对齐方式，等同于 flex 布局的 justify-content 属性。

<template>
    <pure-row gap="10px" justify="space-between">
        <pure-col span="25"></pure-col>
        <pure-col span="25"></pure-col>
        <pure-col span="25"></pure-col>
    </pure-row>
</template>

Props

pure-row

属性名	说明	类型	默认值	可选值	版本
gap	栅格之间的间隔	String	0px	-	+1.0.0
justify	对齐方式	String	flex-start	center、felx-end、space-between 等 flex 布局的 justify-content 属性的可选值	+1.0.0

pure-col

属性名	说明	类型	默认值	可选值	版本
span	栅格所占的分数	[String, Number]	100	0-100的值，支持小数	+1.0.0
offset	栅格便宜量	[String, Number]	0	0-100的值，支持小数	+1.0.0

Slots

pure-col

名称	说明	参数	版本
default	栅格内容	-	+1.0.0