May 07, 2021 Vant
The palace block separates the page horizontally into equal-width chunks to display content or navigate the page
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
The text property sets the text content by setting the icons in the grid with icons within the icon property settings
<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>
The default line shows four grids, and the number of columns can be customized by column-num
<van-grid :column-num="3">
<van-grid-item
v-for="value in 6"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid>
The slot allows you to customize what the grid displays
<van-grid :border="false" :column-num="3">
<van-grid-item>
<van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" rel="external nofollow" />
</van-grid-item>
<van-grid-item>
<van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" rel="external nofollow" />
</van-grid-item>
<van-grid-item>
<van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow" />
</van-grid-item>
</van-grid>
When the square property is set, the height and width of the grid are consistent
<van-grid square>
<van-grid-item
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid>
Sets the distance between the grids with the gutter property
<van-grid :gutter="10">
<van-grid-item
v-for="value in 8"
:key="value"
icon="photo-o"
text="文字"
/>
</van-grid>
Jump the link by setting the vue-router by the to property, and by setting the URL link by the url property
<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>
When you set the dot property, a small red dot appears in the upper right corner of the icon. When you set the info property, the logo appears in the upper right corner of the icon
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="文字" dot />
<van-grid-item icon="search" text="文字" info="99+" />
</van-grid>
Parameters | Description | Type | The default |
---|---|---|---|
column-num
v2.0.4
|
The number of columns | number | string |
4
|
icon-size
v2.2.6
|
Icon size, the default unit
px
|
number | string |
28px
|
gutter |
The spacing between the grids, the default
px
|
number | string |
0
|
border | Whether to display the border | boolean |
true
|
center | Whether to center the contents of the grid | boolean |
true
|
square | Whether to fix the grid to a square | boolean |
false
|
clickable | Whether to open the grid click feedback | boolean |
false
|
Parameters | Description | Type | The default |
---|---|---|---|
text | Text | string | - |
icon | Icon name or picture link | string | - |
dot
v2.2.1
|
Whether to display a small red dot in the upper right corner of the icon | boolean |
false
|
info
v2.2.1
|
The contents of the logo in the upper right corner of the icon | number | string | - |
Url | Click on the link address that jumps | string | - |
to | Click to jump the target routing object, with the to property of vue-router | string | object | - |
replace | Whether to replace the current page history when jumping | boolean |
false
|
The name of the event | Description | Callback parameters |
---|---|---|
Click | Triggered when you click on the grid | event: Event |
Name | Description |
---|---|
default | Customize everything in the palace |
icon | Custom icons |
text | Custom text |