單元格為列表中的單個(gè)展示項(xiàng)。
通過以下方式來(lái)全局注冊(cè)組件,更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。
import { createApp } from 'vue';
import { Cell, CellGroup } from 'vant';
const app = createApp();
app.use(Cell);
app.use(CellGroup);
?Cell
? 可以單獨(dú)使用,也可以與 ?CellGroup
? 搭配使用,?CellGroup
? 可以為 ?Cell
? 提供上下外邊框。
<van-cell-group>
<van-cell title="單元格" value="內(nèi)容" />
<van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>
通過 ?CellGroup
? 的 ?inset
? 屬性,可以將單元格轉(zhuǎn)換為圓角卡片風(fēng)格(從 3.1.0 版本開始支持)。
<van-cell-group inset>
<van-cell title="單元格" value="內(nèi)容" />
<van-cell title="單元格" value="內(nèi)容" label="描述信息" />
</van-cell-group>
通過 ?size
? 屬性可以控制單元格的大小。
<van-cell title="單元格" value="內(nèi)容" size="large" />
<van-cell title="單元格" value="內(nèi)容" size="large" label="描述信息" />
通過 ?icon
? 屬性在標(biāo)題左側(cè)展示圖標(biāo)。
<van-cell title="單元格" icon="location-o" />
只設(shè)置 ?value
? 時(shí),內(nèi)容會(huì)靠左對(duì)齊。
<van-cell value="內(nèi)容" />
設(shè)置 ?is-link
? 屬性后會(huì)在單元格右側(cè)顯示箭頭,并且可以通過 ?arrow-direction
? 屬性控制箭頭方向。
<van-cell title="單元格" is-link />
<van-cell title="單元格" is-link value="內(nèi)容" />
<van-cell title="單元格" is-link arrow-direction="down" value="內(nèi)容" />
可以通過 ?url
? 屬性進(jìn)行 URL 跳轉(zhuǎn),或通過 ?to
? 屬性進(jìn)行路由跳轉(zhuǎn)。
<van-cell title="URL 跳轉(zhuǎn)" is-link url="https://github.com" />
<van-cell title="路由跳轉(zhuǎn)" is-link to="index" />
通過 ?CellGroup
? 的 ?title
? 屬性可以指定分組標(biāo)題。
<van-cell-group title="分組1">
<van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>
<van-cell-group title="分組2">
<van-cell title="單元格" value="內(nèi)容" />
</van-cell-group>
如以上用法不能滿足你的需求,可以使用插槽來(lái)自定義內(nèi)容。
<van-cell value="內(nèi)容" is-link>
<!-- 使用 title 插槽來(lái)自定義標(biāo)題 -->
<template #title>
<span class="custom-title">單元格</span>
<van-tag type="primary">標(biāo)簽</van-tag>
</template>
</van-cell>
<van-cell title="單元格" icon="shop-o">
<!-- 使用 right-icon 插槽來(lái)自定義右側(cè)圖標(biāo) -->
<template #right-icon>
<van-icon name="search" class="search-icon" />
</template>
</van-cell>
<style>
.custom-title {
margin-right: 4px;
vertical-align: middle;
}
.search-icon {
font-size: 16px;
line-height: inherit;
}
</style>
通過 ?center
? 屬性可以讓 ?Cell
? 的左右內(nèi)容都垂直居中。
<van-cell center title="單元格" value="內(nèi)容" label="描述信息" />
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
title | 分組標(biāo)題 | string | -
|
inset v3.1.0
|
是否展示為圓角卡片風(fēng)格 | boolean | false
|
border | 是否顯示外邊框 | boolean | true
|
參數(shù) | 說(shuō)明 | 類型 | 默認(rèn)值 |
---|---|---|---|
title | 左側(cè)標(biāo)題 | number | string | - |
value | 右側(cè)內(nèi)容 | number | string | - |
label | 標(biāo)題下方的描述信息 | string | - |
size | 單元格大小,可選值為 large
|
string | - |
icon | 左側(cè)圖標(biāo)名稱或圖片鏈接,等同于 Icon 組件的 name 屬性 | string | - |
icon-prefix | 圖標(biāo)類名前綴,等同于 Icon 組件的 class-prefix 屬性 | string | van-icon
|
tag | 根節(jié)點(diǎn)對(duì)應(yīng)的 HTML 標(biāo)簽名 | string | div
|
url | 點(diǎn)擊后跳轉(zhuǎn)的鏈接地址 | string | - |
to | 點(diǎn)擊后跳轉(zhuǎn)的目標(biāo)路由對(duì)象,等同于 vue-router 的 to 屬性 | string | object | - |
border | 是否顯示內(nèi)邊框 | boolean | true
|
replace | 是否在跳轉(zhuǎn)時(shí)替換當(dāng)前頁(yè)面歷史 | boolean | false
|
clickable | 是否開啟點(diǎn)擊反饋 | boolean | null
|
is-link | 是否展示右側(cè)箭頭并開啟點(diǎn)擊反饋 | boolean | false
|
required | 是否顯示表單必填星號(hào) | boolean | false
|
center | 是否使內(nèi)容垂直居中 | boolean | false
|
arrow-direction | 箭頭方向,可選值為 left up down
|
string | right
|
title-style | 左側(cè)標(biāo)題額外樣式 | string | Array | object | - |
title-class | 左側(cè)標(biāo)題額外類名 | string | Array | object | - |
value-class | 右側(cè)內(nèi)容額外類名 | string | Array | object | - |
label-class | 描述信息額外類名 | string | Array | object | - |
事件名 | 說(shuō)明 | 回調(diào)參數(shù) |
---|---|---|
click | 點(diǎn)擊單元格時(shí)觸發(fā) | event: MouseEvent |
名稱 | 說(shuō)明 |
---|---|
default | 默認(rèn)插槽 |
title | 自定義分組標(biāo)題 |
名稱 | 說(shuō)明 |
---|---|
title | 自定義左側(cè)標(biāo)題 |
value v3.1.1
|
自定義右側(cè)內(nèi)容 |
label | 自定義標(biāo)題下方的描述信息 |
icon | 自定義左側(cè)圖標(biāo) |
right-icon | 自定義右側(cè)圖標(biāo) |
extra | 自定義單元格最右側(cè)的額外內(nèi)容 |
組件導(dǎo)出以下類型定義:
import type {
CellSize,
CellProps,
CellGroupProps,
CellArrowDirection,
} from 'vant';
組件提供了下列 CSS 變量,可用于自定義樣式,使用方法請(qǐng)參考 ConfigProvider 組件。
名稱 | 默認(rèn)值 | 描述 |
---|---|---|
--van-cell-font-size | var(--van-font-size-md) | - |
--van-cell-line-height | 24px | - |
--van-cell-vertical-padding | 10px | - |
--van-cell-horizontal-padding | var(--van-padding-md) | - |
--van-cell-text-color | var(--van-text-color) | - |
--van-cell-background | var(--van-background-2) | - |
--van-cell-border-color | var(--van-border-color) | - |
--van-cell-active-color | var(--van-active-color) | - |
--van-cell-required-color | var(--van-danger-color) | - |
--van-cell-label-color | var(--van-text-color-2) | - |
--van-cell-label-font-size | var(--van-font-size-sm) | - |
--van-cell-label-line-height | var(--van-line-height-sm) | - |
--van-cell-label-margin-top | var(--van-padding-base) | - |
--van-cell-value-color | var(--van-text-color-2) | - |
--van-cell-icon-size | 16px | - |
--van-cell-right-icon-color | var(--van-gray-6) | - |
--van-cell-large-vertical-padding | var(--van-padding-sm) | - |
--van-cell-large-title-font-size | var(--van-font-size-lg) | - |
--van-cell-large-label-font-size | var(--van-font-size-md) | - |
--van-cell-group-background | var(--van-background-2) | - |
--van-cell-group-title-color | var(--van-text-color-2) | - |
--van-cell-group-title-padding | var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) | - |
--van-cell-group-title-font-size | var(--van-font-size-md) | - |
--van-cell-group-title-line-height | 16px | - |
--van-cell-group-inset-padding | 0 var(--van-padding-md) | - |
--van-cell-group-inset-radius | var(--van-radius-lg) | - |
--van-cell-group-inset-title-padding | var(--van-padding-md) var(--van-padding-md) var(--van-padding-xs) var(--van-padding-xl) | - |
更多建議: