Vant Cell 單元格

引入

import Vue from 'vue';
import { Cell, CellGroup } from 'vant';

Vue.use(Cell);
Vue.use(CellGroup);

代碼演示

基礎(chǔ)用法

Cell可以單獨(dú)使用，也可以與CellGroup搭配使用。CellGroup可以為Cell提供上下外邊框

<van-cell-group>
  <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="描述信息" />

展示圖標(biāo)

通過icon屬性在標(biāo)題左側(cè)展示圖標(biāo)

<van-cell title="單元格" icon="location-o" />

只設(shè)置 value

只設(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)容" />

頁面導(dǎo)航

可以通過url屬性進(jìn)行 URL 跳轉(zhuǎn)，或通過to屬性進(jìn)行路由跳轉(zhuǎn)

<van-cell title="URL 跳轉(zhuǎn)" is-link url="/vant/mobile.html" />
<van-cell title="路由跳轉(zhuǎn)" is-link to="index" />

分組標(biāo)題

通過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>

使用插槽

如以上用法不能滿足你的需求，可以使用插槽來自定義內(nèi)容

<van-cell value="內(nèi)容" is-link>
  <!-- 使用 title 插槽來自定義標(biāo)題 -->
  <template slot="title">
    <span class="custom-title">單元格</span>
    <van-tag type="danger">標(biāo)簽</van-tag>
  </template>
</van-cell>

<van-cell title="單元格" icon="shop-o">
  <!-- 使用 right-icon 插槽來自定義右側(cè)圖標(biāo) -->
  <van-icon
    slot="right-icon"
    name="search"
    style="line-height: inherit;"
  />
</van-cell>

垂直居中

通過center屬性可以讓Cell的左右內(nèi)容都垂直居中

<van-cell center title="單元格" value="內(nèi)容" label="描述信息" />

API

CellGroup Props

Cell Props

Cell Events

CellGroup Slots

Cell Slots