AI教程网 - 未来以来,拥抱AI;新手入门,从AI教程网开始......

Vant Grid 宫格

VANT教程 AI君 56℃

介绍

宫格可以在水平方向上把页面分隔成等宽度的区块,用于展示内容或进行页面导航

引入

import Vue from 'vue';
import { Grid, GridItem } from 'vant';

Vue.use(Grid);
Vue.use(GridItem);

代码演示

基本用法

通过icon属性设置格子内的图标,text属性设置文字内容

<van-grid>
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
  <van-grid-item icon="photo-o" text="文字" />
</van-grid>

自定义列数

默认一行展示四个格子,可以通过column-num自定义列数

<van-grid :column-num="3">
  <van-grid-item
    v-for="value in 6"
    :key="value"
    icon="photo-o"
    text="文字"
  />
</van-grid>

自定义内容

通过插槽可以自定义格子展示的内容

<van-grid :border="false" :column-num="3">
  <van-grid-item>
    <van-image src="http://www.ainoob.cn/wp-content/images/202003/apple-1.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="http://www.ainoob.cn/wp-content/images/202003/apple-2.jpg" />
  </van-grid-item>
  <van-grid-item>
    <van-image src="http://www.ainoob.cn/wp-content/images/202003/apple-3.jpg" />
  </van-grid-item>
</van-grid>

正方形格子

设置square属性后,格子的高度会和宽度保持一致

<van-grid square>
  <van-grid-item
    v-for="value in 8"
    :key="value"
    icon="photo-o"
    text="文字"
  />
</van-grid>

格子间距

通过gutter属性设置格子之间的距离

<van-grid :gutter="10">
  <van-grid-item
    v-for="value in 8"
    :key="value"
    icon="photo-o"
    text="文字"
  />
</van-grid>

页面导航

通过to属性设置vue-router跳转链接,通过url属性设置 URL 跳转链接

<van-grid clickable :column-num="2">
  <van-grid-item icon="home-o" text="路由跳转" to="/" />
  <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
</van-grid>

提示信息

设置dot属性后,会在图标右上角展示一个小红点。设置info属性后,会在图标右上角展示相应的徽标

<van-grid :column-num="2">
  <van-grid-item icon="home-o" text="文字" dot />
  <van-grid-item icon="search" text="文字" info="99+" />
</van-grid>

API

Grid Props

参数 说明 类型 默认值
column-num v2.0.4 列数 number | string 4
icon-size v2.2.6 图标大小,默认单位为px number | string 28px
gutter 格子之间的间距,默认单位为px number | string 0
border 是否显示边框 boolean true
center 是否将格子内容居中显示 boolean true
square 是否将格子固定为正方形 boolean false
clickable 是否开启格子点击反馈 boolean false

GridItem Props

参数 说明 类型 默认值
text 文字 string
icon 图标名称 或图片链接 string
dot v2.2.1 是否显示图标右上角小红点 boolean false
info v2.2.1 图标右上角徽标的内容 number | string
url 点击后跳转的链接地址 string
to 点击后跳转的目标路由对象,同 vue-router 的 to 属性 string | object
replace 是否在跳转时替换当前页面历史 boolean false

GridItem Events

事件名 说明 回调参数
click 点击格子时触发 event: Event

GridItem Slots

名称 说明
default 自定义宫格的所有内容
icon 自定义图标
text 自定义文字

转载请注明:www.ainoob.cn » Vant Grid 宫格

喜欢 (4)or分享 (0)