免費 AI IDE
Vant2 Grid 宮格
2025-09-02 12:00 更新
介紹
宮格可以在水平方向上把頁面分隔成等寬度的區(qū)塊，用于展示內(nèi)容或進(jìn)行頁面導(dǎo)航。
引入
import Vue from 'vue';
import { Grid, GridItem } from 'vant';
Vue.use(Grid);
Vue.use(GridItem);
代碼演示
基礎(chǔ)用法
通過 icon 屬性設(shè)置格子內(nèi)的圖標(biāo)，text 屬性設(shè)置文字內(nèi)容。
<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>
自定義列數(shù)
默認(rèn)一行展示四個格子，可以通過 column-num 自定義列數(shù)。
<van-grid :column-num="3">
<van-grid-item v-for="value in 6" :key="value" icon="photo-o" text="文字" />
</van-grid>
自定義內(nèi)容
通過插槽可以自定義格子展示的內(nèi)容。
<van-grid :border="false" :column-num="3">
<van-grid-item>
<van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" rel="external nofollow" />
</van-grid-item>
<van-grid-item>
<van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" rel="external nofollow" />
</van-grid-item>
<van-grid-item>
<van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" rel="external nofollow" />
</van-grid-item>
</van-grid>
正方形格子
設(shè)置 square 屬性后，格子的高度會和寬度保持一致。
<van-grid square>
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>
格子間距
通過 gutter 屬性設(shè)置格子之間的距離。
<van-grid :gutter="10">
<van-grid-item v-for="value in 8" :key="value" icon="photo-o" text="文字" />
</van-grid>
內(nèi)容橫排
將 direction 屬性設(shè)置為 horizontal，可以讓宮格的內(nèi)容呈橫向排列。
<van-grid direction="horizontal" :column-num="2">
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
<van-grid-item icon="photo-o" text="文字" />
</van-grid>
頁面導(dǎo)航
通過 to 屬性設(shè)置 vue-router 跳轉(zhuǎn)鏈接，通過 url 屬性設(shè)置 URL 跳轉(zhuǎn)鏈接。
<van-grid clickable :column-num="2">
<van-grid-item icon="home-o" text="路由跳轉(zhuǎn)" to="/" />
<van-grid-item icon="search" text="URL 跳轉(zhuǎn)" url="/vant/mobile.html" />
</van-grid>
徽標(biāo)提示
設(shè)置 dot 屬性后，會在圖標(biāo)右上角展示一個小紅點。設(shè)置 badge 屬性后，會在圖標(biāo)右上角展示相應(yīng)的徽標(biāo)。
<van-grid :column-num="2">
<van-grid-item icon="home-o" text="文字" dot />
<van-grid-item icon="search" text="文字" badge="99+" />
</van-grid>
API
Grid Props
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| column-num | 列數(shù) | number | string | 4
|
| icon-size | 圖標(biāo)大小，默認(rèn)單位為px
|
number | string | 28px
|
| gutter | 格子之間的間距，默認(rèn)單位為px
|
number | string | 0
|
| border | 是否顯示邊框 | boolean | true
|
| center | 是否將格子內(nèi)容居中顯示 | boolean | true
|
| square | 是否將格子固定為正方形 | boolean | false
|
| clickable | 是否開啟格子點擊反饋 | boolean | false
|
direction v2.8.2
|
格子內(nèi)容排列的方向，可選值為 horizontal
|
string | vertical
|
GridItem Props
| 參數(shù) | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| text | 文字 | string | - |
| icon | 圖標(biāo)名稱或圖片鏈接 | string | - |
icon-prefix v2.5.3
|
圖標(biāo)類名前綴，同 Icon 組件的 class-prefix 屬性 | string | van-icon
|
| dot | 是否顯示圖標(biāo)右上角小紅點 | boolean | false
|
badge v2.5.6
|
圖標(biāo)右上角徽標(biāo)的內(nèi)容 | number | string | - |
info 2.2.1
|
圖標(biāo)右上角徽標(biāo)的內(nèi)容（已廢棄，請使用 badge 屬性） | number | string | - |
| url | 點擊后跳轉(zhuǎn)的鏈接地址 | string | - |
| to | 點擊后跳轉(zhuǎn)的目標(biāo)路由對象，同 vue-router 的 to 屬性 | string | object | - |
| replace | 是否在跳轉(zhuǎn)時替換當(dāng)前頁面歷史 | boolean | false
|
GridItem Events
| 事件名 | 說明 | 回調(diào)參數(shù) |
|---|---|---|
| click | 點擊格子時觸發(fā) | event: Event |
GridItem Slots
| 名稱 | 說明 |
|---|---|
| default | 自定義宮格的所有內(nèi)容 |
| icon | 自定義圖標(biāo) |
| text | 自定義文字 |
樣式變量
組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。
| 名稱 | 默認(rèn)值 | 描述 |
|---|---|---|
| @grid-item-content-padding | @padding-md @padding-xs
|
- |
| @grid-item-content-background-color | @white
|
- |
| @grid-item-content-active-color | @active-color
|
- |
| @grid-item-icon-size | 28px
|
- |
| @grid-item-text-color | @gray-7
|
- |
| @grid-item-text-font-size | @font-size-sm
|
- |
以上內(nèi)容是否對您有幫助：
更多建議：