Cell 单元格

介绍

单元格为列表中的单个展示项。

基础用法

Cell 可以单独使用，搭配 CellGroup 使用时，可设置展示上下外边框。

<vd-cell-group>
  <vd-cell title="单元格" value="内容" />
  <vd-cell title="单元格" value="内容" />
</vd-cell-group>

卡片主题

通过 theme 设置单元格主题样式。

<vd-cell-group theme="card">
  <vd-cell title="单元格" value="内容" />
  <vd-cell title="单元格" value="内容" />
</vd-cell-group>

不展示边框

<vd-cell-group :borderless="true">
  <vd-cell title="单元格" value="内容" />
  <vd-cell title="单元格" value="内容" />
</vd-cell-group>

展示箭头

<vd-cell title="单元格" value="内容" is-link />

展示图标

<vd-cell title="单元格" value="内容" is-link left-icon="question"></vd-cell>

展示表单必填

<vd-cell title="单元格" value="内容" is-link required></vd-cell>

垂直居中

<vd-cell-group center>
  <vd-cell title="单元格" value="内容" is-link></vd-cell>
  <vd-cell title="单元格" value="内容" is-link></vd-cell>
</vd-cell-group>

<vd-cell title="单元格" value="内容" is-link center></vd-cell>

API

CellGroup Props

参数	说明	类型	默认值
theme	主题样式	default card	default
center	是否使内容垂直居中	boolean	false
borderless	是否不显示内边框	boolean	false

Cell Props

参数	说明	类型	默认值
title	左侧标题	string	-
value	右侧内容	string	-
center	是否使内容垂直居中	boolean	false
is-link	是否展示右侧箭头并开启点击反馈	boolean	false
clickable	是否开启点击反馈	boolean	false
required	是否显示表单必填星号	boolean	false
left-icon	左侧图标名称	IconsName	-
right-icon	右侧图标名称	IconsName	-

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

CellGroup Events

事件名	说明	回调参数
click	点击时触发	MouseEvent

Cell Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
click-left	点击左侧图标时触发	MouseEvent
click-right	点击右侧图标时触发	MouseEvent
click-title	点击标题时触发	MouseEvent
click-value	点击内容时触发	MouseEvent

CellGroup Slots

名称	说明
default	自定义内容

Cell Slots

名称	说明
default	自定义内容
left	左侧内容
title	标题
right	右侧内容