Cell 单元格

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

代码演示

基础用法

Cell 使用。

<hd-cell title="我是单元格" placeholder="单元格的内容"></hd-cell>

展示图标

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

<hd-cell title="单元格" icon="ic_address_fill" />

设置 value,

设置 value 时，默认向左对齐，且支持插槽自定义value。

<hd-cell value="内容" />
<hd-cell value="内容" is-link>
  <!-- 使用 title 插槽来自定义标题 -->
  <template #value>
    <span class="custom-value">内容</span>
  </template>
</hd-cell>

展示箭头

设置 is-link 属性后会在单元格右侧显示箭头。

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

内容超出省略

提供 ellipsis 属性，控制超出一行最大宽度后是否省略，默认true

  <hd-cell title="我是单元格" :ellipsis="false" isLink></hd-cell>

下划线

通过 hasLine 属性可以让 Cell 展示下划线,默认为 false。

<hd-cell title="单元格" value="内容" hasLine/>

Props

Name	Description	Type	Required	Default
icon	左侧图标名称，等同于 Icon 组件的 name 属性	String	false	-
title	左侧标题	String	false	-
value	右侧内容	String	false	-
label	标题下方的描述信息	String	false	-
align	右侧内容的对齐方式，可选值为 "left"	"right"	'left' / 'right'	false
isLink	是否为链接	Boolean / String	false	false
hasLine	是否有下划线	Boolean / String	false	false
ellipsis	是否超出省略	Boolean	false	true
placeholder	占位文字	String	false	-
required	是否显示表单必填星号	Boolean	false	false

Events

Event Name	Description	Parameters
click	单元格被点击时触发，仅在isLink为true的情况下生效	-

Slots

Name	Description	Default Slot Content
value	自定义单元格内容	-