Cell 单元格

单元格为列表中的单个展示项，可组合使用形成列表。

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

Cell 可以单独使用，也可以与 Cell 组合使用形成列表。

<zq-cell title="单元格" value="内容" />
<zq-cell title="单元格" value="内容" label="描述信息" />

展示图标

通过 icon 属性在标题左侧展示图标。

<zq-cell title="单元格" icon="settings" />

展示箭头

设置 is-link 属性后会在单元格右侧展示箭头，并且可以通过 url 属性设置跳转地址。

<zq-cell title="单元格" is-link />
<zq-cell title="单元格" is-link url="/pages/demo/basic" />

垂直居中

通过 center 属性可以让 Cell 的左右内容都垂直居中。

<zq-cell title="单元格" value="内容" label="描述信息" center />

大号单元格

通过 large 属性可以设置大号单元格。

<zq-cell title="单元格" value="内容" large />

隐藏下边框

通过 :border="false" 隐藏下边框。

<zq-cell title="单元格" :border="false" />

使用插槽

<zq-cell title="单元格">
  <template #default>
    <zq-tag type="primary" text="标签" />
  </template>
</zq-cell>

<zq-cell>
  <template #title>
    <text>自定义标题</text>
  </template>
  <template #right-icon>
    <zq-icon name="star" :size="16" />
  </template>
</zq-cell>

API

Props

参数	说明	类型	默认值
title	左侧标题	string | number	''
value	右侧内容	string | number	''
label	标题下方的描述信息	string	''
icon	左侧图标名称	string	''
is-link	是否展示右侧箭头并开启点击反馈	boolean	false
clickable	是否开启点击反馈	boolean	false
center	是否使内容垂直居中	boolean	false
border	是否显示下边框	boolean	true
large	是否使用大号单元格	boolean	false
url	点击后跳转的链接地址	string	''

Events

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

Slots

名称	说明
default	自定义右侧 value 的内容
title	自定义左侧 title 的内容
label	自定义标题下方 label 的内容
icon	自定义左侧图标
right-icon	自定义右侧图标

主题定制

变量名	说明
--color-bg-card	单元格背景色
--color-bg-hover	点击态背景色
--color-divider	下边框颜色
--color-text-primary	标题文字颜色
--color-text-secondary	描述/值文字颜色
--color-text-placeholder	箭头图标颜色