单元格 Cell

• 一个基础的按钮组件
• 可以设置标题、描述、提示、左侧图标、右侧箭头
• 右侧箭头支持旋转

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-cell

基础使用

通过 title 属性设置标题即可使用。

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

描述内容

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

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

右侧箭头

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

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

左侧图标

通过 icon 属性设置左侧图标名称即可使用。

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

提示内容

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

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

边框

通过辅助类 pure-cell-border 添加单元格边框(上边框)。

提示

使用辅助类时，如果项目设置了 mergeVirtualHostAttributes(合并小程序组件虚拟节点外层属性)，则可以直接把辅助类名添加到组件上，否则，需将辅助类名添加到外层元素上。

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

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	""	-	+1.0.0
desc	单元格描述文本	String	""	-	+1.0.0
tip	单元格提示文本	String	""	-	+1.0.0
arrow	是否显示右侧箭头	Boolean	false	true	+1.0.0
arrowIcon	右侧箭头图标名称	String	__you2	-	+1.0.0
arrowMode	右侧箭头图片图标的裁剪模式，同图标组件（Icon）的 mode 属性，参考	String	undefined	-	+1.0.0
arrowRotate	是否旋转右侧箭头	Boolean	false	true	+1.0.0

Event

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

Slots

提示

京东小程序不支持 slot。

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

样式变量

变量名	默认值	版本
--pure-cell-padding	0 15px	+1.0.0
--pure-cell-background	var(--pure-background-element)	+1.0.0
--pure-cell-line-height	1	+1.0.0
--pure-cell-text-align	justify	+1.0.0
--pure-cell-wrapper-padding	15px 0	+1.0.0
--pure-cell-border-top-width	- 或 1px	+1.0.0
--pure-cell-border-top-style	solid	+1.0.0
--pure-cell-border-top-color	var(--pure-border-color-default)	+1.0.0
--pure-cell-display	flex	+1.0.0
--pure-cell-flex-direction	row	+1.0.0
--pure-cell-align-items	center	+1.0.0
--pure-cell-justify-content	space-between	+1.0.0
--pure-cell-gap	4px	+1.0.0
--pure-cell-icon-flex-shrink	0	+1.0.0
--pure-cell-icon-display	inline-flex	+1.0.0
--pure-cell-icon-flex-direction	row	+1.0.0
--pure-cell-icon-align-items	center	+1.0.0
--pure-cell-icon-font-size	var(--pure-font-size-larger)	+1.0.0
--pure-cell-icon-color	-	+1.0.0
--pure-cell-icon-margin	-	+1.0.1
--pure-cell-content-flex	1	+1.0.0
--pure-cell-content-display	flex	+1.0.0
--pure-cell-content-flex-direction	row	+1.0.0
--pure-cell-content-align-items	center	+1.0.0
--pure-cell-content-justify-content	space-between	+1.0.0
--pure-cell-title-font-weight	500	+1.0.0
--pure-cell-title-overflow	-	+1.0.0
--pure-cell-title-flex	1	+1.0.0
--pure-cell-desc-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-cell-desc-color	-	+1.0.0
--pure-cell-desc-opacity	var(--pure-opacity-light-text)	+1.0.0
--pure-cell-desc-overflow	-	+1.0.0
--pure-cell-desc-width	-	+1.0.0
--pure-cell-arrow-flex-shrink	0	+1.0.0
--pure-cell-arrow-display	inline-flex	+1.0.0
--pure-cell-arrow-flex-direction	row	+1.0.0
--pure-cell-arrow-align-items	center	+1.0.0
--pure-cell-arrow-justify-content	center	+1.0.0
--pure-cell-arrow-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-cell-arrow-color	-	+1.0.0
--pure-cell-arrow-opacity	var(--pure-opacity-light-text)	+1.0.0
--pure-cell-arrow-rotate-duration	0.25s	+1.0.0
--pure-cell-arrow-rotate	0deg 或 90deg	+1.0.0
--pure-cell-arrow-margin	-	+1.0.1
--pure-cell-tip-display	flex	+1.0.0
--pure-cell-tip-flex-direction	row	+1.0.0
--pure-cell-tip-align-items	center	+1.0.0
--pure-cell-tip-gap	var(--pure-cell-gap, 4px)	+1.0.0
--pure-cell-tip-margin	4px 0 0 0	+1.0.0
--pure-cell-tip-padding	-	+1.0.0
--pure-cell-tip-font-size	var(--pure-font-size-smaller)	+1.0.0
--pure-cell-tip-color	-	+1.0.0
--pure-cell-tip-opacity	var(--pure-opacity-light-text)	+1.0.0
--pure-cell-tip-placeholder-icon-display	-	+1.0.0