单元格

单元格组件。

标题

通过 title 属性设置单元格标题。

<template>
	<pure-cell title="单元格标题"></pure-cell>
</template>

描述

通过 desc 属性设置单元格描述。

<template>
	<pure-cell title="单元格标题" desc="单元格描述"></pure-cell>
</template>

左侧图标

通过 iconName 属性设置单元格左侧图标。

<template>
	<pure-cell title="单元格标题" iconName="__shezhi"></pure-cell>
</template>

右侧图标

• 通过 arrowName 属性设置单元格右侧图标, 默认值为 __arrow-right。
• 通过 showArrow 属性设置是否显示右侧图标, 默认值为 false。
• 通过 rotate 属性设置是否旋转（90 度）右侧图标。

<template>
	<pure-cell title="单元格标题" showArrow></pure-cell>
</template>

提示文本

通过 tips 属性设置单元格提示文本。

<template>
	<pure-cell title="单元格标题" tips="提示文本"></pure-cell>
</template>

朴素样式

单元格组件有个默认样式，有背景色，并且有一定的内边距和圆角。如果想去掉默认样式，可以设置 plain 属性为 true。

<template>
	<pure-cell title="单元格标题" tips="提示文本" plain></pure-cell>
</template>

文本行数

单元格组件默认 标题、描述、提示 显示一行，如果超出一行，会自动省略号显示。可以通过以下属性设置文本行数：

• title-lines：标题文本行数，默认 1
• desc-lines：描述文本行数，默认 1
• tips-lines：提示文本行数，默认 1

<template>
	<!-- 最多显示2行标题 -->
	<pure-cell title="单元格标题" desc="单元格描述" tips="提示文本" title-lines="2"></pure-cell>
	<!-- 最多显示2行描述 -->
	<pure-cell title="单元格标题" desc="单元格描述" tips="提示文本" desc-lines="2"></pure-cell>
	<!-- 最多显示2行提示 -->
	<pure-cell title="单元格标题" desc="单元格描述" tips="提示文本" tips-lines="2"></pure-cell>
</template>

对齐方式

单元格内容默认垂直居中对齐，可以通过设置 topAlign 属性将左侧图标顶部对齐（只影响左侧图标）。如果需要其他内容顶部对齐，需使用样式变量覆盖默认组件内部预定义好的样式变量的值实现。

<template>
	<pure-cell iconName="__dingwei" title="单元格标题" tips="提示文本" topAlign></pure-cell>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
iconName	String		左侧图标名称或路径
iconOpts	Object		左侧图标的配置 参考
title	String		单元格标题
desc	String		单元格描述
tips	String		单元格提示
showArrow	Boolean	false	是否显示右侧箭头
arrowName	String	__arrow-right	右侧箭头图标名称或路径
arrowOpts	Object		右侧箭头图标的配置 参考
rotate	String		右侧箭头图标是否旋转（90 度）
plain	Boolean	false	是否为朴素单元格
topAlign	Boolean	false	单元格内容是否顶部对齐
titleLines	[Number, String]	1	单元格标题行数
descLines	[Number, String]	1	单元格描述行数
tipsLines	[Number, String]	1	单元格提示行数

事件

名称	参数	说明
onClick		点击事件

插槽

名称	参数	说明
#icon		左侧图标
#default		默认，主内容（标题+描述+提示）
#title		标题
#desc		描述
#tips		提示
#arrow		右侧图标

样式变量

名称	说明
--pure-cell-align-items	单元格内容垂直对齐方式
--pure-cell-padding	内边距
--pure-cell-background	单元格背景
--pure-cell-border-radius	单元格圆角大小
--pure-cell-icon-font-size	左侧图标大小
--pure-cell-icon-font-weight	左侧图标字体粗细
--pure-cell-icon-color	左侧图标颜色
--pure-cell-icon-margin-right	左侧图标外边距
--pure-cell-icon-padding	左侧图标内边距
--pure-cell-icon-width	左侧图标宽度
--pure-cell-icon-height	左侧图标高度
--pure-cell-icon-border	左侧图标边框样式
--pure-cell-icon-border-radius	左侧图标圆角大小
--pure-cell-icon-background	左侧图标背景
--pure-cell-icon-align-self	左侧图标垂直对齐方式
--pure-cell-content-margin	中间主内容（标题+描述+提示）外边距
--pure-cell-content-gap	标题+提示和描述之间的间距
--pure-cell-titile-tips-gap	标题和提示之间的间距
--pure-cell-title-min-width	标题最小宽度
--pure-cell-title-font-size	标题字体大小
--pure-cell-title-font-weight	标题字体粗细
--pure-cell-title-color	标题颜色
--pure-cell-title-margin	标题外边距
--pure-cell-title-padding	标题内边距
--pure-cell-desc-font-size	描述字体大小
--pure-cell-desc-font-weight	描述字体粗细
--pure-cell-desc-color	描述颜色
--pure-cell-desc-margin	描述外边距
--pure-cell-desc-padding	描述内边距
--pure-cell-desc-align-self	描述垂直对齐方式
--pure-cell-tips-font-size	提示字体大小
--pure-cell-tips-font-weight	提示字体粗细
--pure-cell-tips-color	提示颜色
--pure-cell-tips-margin	提示外边距
--pure-cell-tips-padding	提示内边距
--pure-cell-arrow-font-size	右侧图标字体大小
--pure-cell-arrow-font-weight	右侧图标字体粗细
--pure-cell-arrow-color	右侧图标颜色
--pure-cell-arrow-margin	右侧图标外边距
--pure-cell-arrow-padding	右侧图标内边距
--pure-cell-arrow-width	右侧图标宽度
--pure-cell-arrow-height	右侧图标高度
--pure-cell-arrow-border	右侧图标边框样式
--pure-cell-arrow-border-radius	右侧图标圆角大小
--pure-cell-arrow-background	右侧图标背景
--pure-cell-arrow-align-self	右侧图标垂直对齐方式
--pure-cell-arrow-rotate	右侧图标旋转角度
--pure-cell-arrow-transform	右侧图标整体变换样式