Silver Formily Vant0.0.0

Appearance

Mobile Preview Open
Open mobile preview

Grid ​

Grid 是重新封装的轻量移动端网格布局组件。

本组件精简自@silver-formily/grid，仅保留了必要的功能。在设计中这个Grid组件主要为Checkbox或者Radio组件提供网格布局的，而VanGrid更像是为了展示图片图标等元素设计的组件。另外，移动端表单布局更常见的是“固定列数 + 跨列”，因此这里只保留了列数、间距和跨列能力，避免把桌面端的断点、自适应宽度、节点显隐等复杂逻辑带进来。

下面两个 demo 都只使用普通 HTML 节点，方便在移动端预览里直接观察宫格布局。

基础使用 ​

vue
<script setup lang="ts">
import { Grid } from '@silver-formily/vant'

const cards = [
  {
    title: '新品上架',
    description: '本周推荐 12 款人气单品',
  },
  {
    title: '订单跟踪',
    description: '查看物流与签收状态',
  },
  {
    title: '优惠券',
    description: '3 张即将到期，记得使用',
  },
  {
    title: '地址管理',
    description: '收货地址与发票信息',
  },
]
</script>

<template>
  <Grid :columns="2" :column-gap="8" :row-gap="8">
    <article v-for="card in cards" :key="card.title" class="feature-card">
      <strong>{{ card.title }}</strong>
      <p>{{ card.description }}</p>
    </article>
  </Grid>
</template>

<style scoped>
.feature-card {
  display: grid;
  gap: 6px;
  min-height: 100%;
  padding: 14px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--van-primary-color) 8%, #fff);
  color: var(--van-text-color);
}

.feature-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--van-text-color-2);
}
</style>

使用 Grid.GridColumn 控制跨列 ​

vue
<script setup lang="ts">
import { Grid } from '@silver-formily/vant'

const shortcuts = [
  '待支付',
  '待发货',
  '待收货',
  '售后中',
]
const GridColumn = Grid.GridColumn
</script>

<template>
  <Grid :columns="2" :column-gap="8" :row-gap="8">
    <div v-for="shortcut in shortcuts" :key="shortcut" class="shortcut-card">
      {{ shortcut }}
    </div>
    <GridColumn :grid-span="2">
      <div class="summary-card">
        <strong>Grid.GridColumn 可以跨列</strong>
        <p>需要某个区块占满两列时，直接包一层 GridColumn 即可。</p>
      </div>
    </GridColumn>
    <div class="summary-card summary-card--muted" data-grid-span="-1">
      普通节点也可以直接写 <code>data-grid-span="-1"</code> 让它自动铺满整行。
    </div>
  </Grid>
</template>

<style scoped>
.shortcut-card {
  display: grid;
  place-items: center;
  min-height: 84px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--van-success-color) 10%, #fff);
  color: var(--van-text-color);
  font-size: 14px;
  font-weight: 600;
}

.summary-card {
  display: grid;
  gap: 6px;
  min-height: 100%;
  padding: 12px;
  border-radius: 12px;
  background: var(--van-primary-color);
  color: #fff;
}

.summary-card p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
}

.summary-card--muted {
  align-content: center;
  background: color-mix(in srgb, var(--van-primary-color) 10%, #fff);
  color: var(--van-text-color);
}

.summary-card--muted code {
  font-size: 12px;
}
</style>

API ​

使用约定 ​

  • 普通子节点会直接作为网格项参与布局，不会再额外包一层 Vant 宫格节点
  • 对 Formily 而言，可以直接在 Grid 内部放 Field / SchemaField 产出的子节点
  • 如果需要显式控制某个子节点跨列，优先使用 Grid.GridColumn
  • 如果只想临时调一项的跨度，也可以直接在普通节点上写 data-grid-span
  • data-grid-span="-1" 表示自动铺满当前行剩余列数，比较适合操作区、说明区这类尾部块

Grid ​

属性名类型描述默认值
columnsnumber网格列数1
columnGapnumber列间距8
rowGapnumber行间距4

Grid.GridColumn ​

属性名类型描述默认值
gridSpannumber当前节点占用的列数；传 -1 时自动铺满当前行剩余列1

参考 ​

组件封装方式延续了 @silver-formily/element-plus 的 FormGrid 使用习惯，但实现已经切换为更适合移动端的本地轻量版本。