单元格 Cell

单元格组件。

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 title 属性设置标题。

<template>
  <pure-cell title="一个基础的单元格"></pure-cell>
</template>

描述内容

• 通过 desc 属性设置右侧描述内容。

<template>
  <pure-cell title="带描述内容的单元格" desc="我是描述内容"></pure-cell>
</template>

右侧箭头

• 通过 arrow 属性设置是否显示右侧箭头。
• 通过 arrowName 属性设置右侧箭头图标。
• 通过 arrowRotate 属性设置是否旋转右侧箭头，默认旋转 90deg，可以通过 --pure-cell-arrow-rotate 自定义旋转角度。

<template>
  <pure-cell title="右侧箭头" desc="单元格描述内容" arrow></pure-cell>
  <pure-cell
    title="右侧箭头"
    desc="支持箭头旋转"
    arrow
    :rotate="rotate"
    @onClick="rotate === 90 ? (rotate = 0) : (rotate = 90)"
    tip="点击切换右侧箭头旋转状态"
  ></pure-cell>
</template>

左侧图标

• 通过 icon 属性设置左侧图标。

<template>
  <pure-cell
    title="带左侧图标的单元格"
    desc="单元格描述内容"
    arrow
    icon="__huiyuan_2"
  ></pure-cell>
</template>

提示内容

• 通过 tip 属性设置下方显示的提示内容。

<template>
  <pure-cell
    title="带提示内容的单元格"
    desc="单元格描述内容"
    arrow
    icon="__huiyuan_2"
    tip="我是提示内容"
  ></pure-cell>
</template>

边框

• 通过辅助类 pure-cell-border-top 或 pure-cell-border-bottom 添加单元格上下边框。

提示

辅助类使用规则

<template>
  <pure-cell
    class="pure-cell-border-top"
    title="单元格边框"
    desc="单元格描述内容"
    arrow
    icon="/static/icons/button.png"
    tip="我是提示内容"
  ></pure-cell>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
icon	左侧图标名称	String	""	-	+1.0.0
iconMode	左侧图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
title	单元格标题	[String, Number]	""	-	+1.0.0
desc	单元格描述文本	[String, Number]	""	-	+1.0.0
tip	单元格提示文本	[String, Number]	""	-	+1.0.0
arrow	是否显示右侧箭头	Boolean	false	true	+1.0.0
arrowIcon	右侧箭头图标名称	String	__you2	-	+1.0.0
arrowMode	右侧箭头图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
rotate	右侧箭头旋转角度	[Number, String]	0	0-360	+1.0.0
disabled	禁用状态	Boolean	false	true	+1.0.0
disabledClass	禁用类名	String	pure-disabled	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	标题+描述	-	+1.0.0
icon	图标	-	+1.0.0
title	标题	-	+1.0.0
desc	描述	-	+1.0.0
arrow	箭头	-	+1.0.0
tip	提示	-	+1.0.0