Cell 单元格 ¶

cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。

平台差异说明 ¶

App（vue）	App（nvue）	H5	小程序
√	√	√	√

基础功能 ¶

该组件需要搭配cell-group使用，并由它实现列表组的上下边框，如不需要上下边框，配置cellGroup的border参数为false即可。
通过title设置左侧标题，value设置右侧内容。
通过icon字段设置图标，，或者图片链接(本地文件建议使用绝对地址)。

注意： 由于cell组件需要由cellGroup组件提供参数值，这些父子组件间通过Vue的"provide/inject"特性注入依赖，所以您必须使用cellGroup包裹cell组件才能正常使用。

html

<template>
	<up-cell-group>
		<up-cell icon="setting-fill" title="个人设置"></up-cell>
		<up-cell icon="integral-fill" title="会员等级" value="新版本"></up-cell>
	</up-cell-group>
</template>

自定义内容 ¶

通过插槽icon可以自定义图标，内容会替换左边图标位置
通过插槽title定义左边标题部分
通过插槽right-icon定义右边内容部分

html

<up-cell-group>
	<up-cell  title="夕阳无限好" arrow-direction="down">
		<up-icon slot="icon" size="32" name="search"></up-icon>
		<!-- <up-badge count="99" :absolute="false" slot="right-icon"></up-badge> -->
		<up-switch slot="right-icon" v-model="checked"></up-switch>
	</up-cell>
	<up-cell icon="setting-fill" title="只是近黄昏"></up-cell>
</up-cell-group>

如上所示，可以给cell组件通过slot="right-icon"设定右边uView自带的badge或者switch组件：

如果搭配的是badge组件，注意设置absolute参数为false去掉绝对定位，否则其位于右侧的恰当位置，详见Badge 徽标数。
如果搭配的是switch组件，注意要通过v-model绑定一个内容为布尔值的变量，否则无法操作switch，详见Switch 开关选择器。

自定义大小 ¶

设置size可自定义大小

html


<up-cell-group>
	<up-cell size="large" title="单元格" value="内容" isLink></up-cell>
	<up-cell size="large" title="单元格" value="内容" label="描述信息"></up-cell>
</up-cell-group>

展示右箭头 ¶

设置isLink为true，将会显示右侧的箭头，可以通过arrow-direction控制箭头的方向

html

<up-cell-group>
	<up-cell icon="share" title="停车坐爱枫林晚" :isLink="true" arrow-direction="down"></up-cell>
	<up-cell icon="map" title="霜叶红于二月花" :isLink="false"></up-cell>
</up-cell-group>

跳转页面 ¶

设置isLink为true，单元格点击可跳转页面,传入url设置跳转地址

html

<up-cell-group>
	<up-cell title="打开标签页" isLink url="/pages/componentsB/tag/tag"></up-cell>
	<up-cell title="打开徽标页" isLink url="/pages/componentsB/badge/badge"></up-cell>
</up-cell-group>

右侧内容垂直居中 ¶

设置center为true，可将右侧内容垂直居中

html

<up-cell-group>
  <up-cell title="单元格" value="内容" label="描述信息" center></up-cell>
</up-cell-group>

自定义插槽 ¶

设置slot为title，可自定义左侧区域内容设置slot为value，可自定义右侧区域内容

html

<up-cell-group>
  <up-cell value="内容">
    <template #title>
        <view class="u-slot-title">
          <text class="u-cell-text">单元格</text>
          <up-tag text="标签" plain size="mini" type="warning"></up-tag>
        </view>
    </template>
  </up-cell>
  <up-cell title="单元格" isLink>
    <template #value>
      <text class="u-slot-value">99</text>
    </template>
  </up-cell>
</up-cell-group>

css

/* App.vue */
.cell-hover-class {
	background-color: rgb(235, 237, 238);
}

/* 或者单是设置透明度 */
.cell-hover-class {
	opacity: 0.5;
}

此页面源代码地址 ¶

页面源码地址

github

gitee

API ¶

CellGroup Props ¶

参数	说明	类型	默认值	可选值
title	分组标题	String	-	-
border	是否显示外边框	Boolean	true	false
customStyle	用户自定义外部样式，对象形式，如`{'font-size': '12px'}` 或 `{'fontSize': '12px'}`	object	-	-

Cell Props ¶

参数	说明	类型	默认值	可选值
title	左侧标题	`String`/`Number`	-	-
label	标题下方的描述信息	`String`/`Number`	-	-
value	右侧的内容	`String`/`Number`	-	-
icon	左侧图标名称，或者图片链接(本地文件建议使用绝对地址)	String	-	-
disabled	是否禁用cell	Boolean	false	true
border	是否显示下边框	Boolean	true	false
center	内容是否垂直居中(主要是针对右侧的value部分)	Boolean	false	true
url	点击后跳转的URL地址	String	-	-
linkType	链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作	String	navigateTo	-
clickable	是否开启点击反馈(表现为点击时加上灰色背景)	Boolean	false	true
isLink	是否展示右侧箭头并开启点击反馈	Boolean	false	true
required	是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)	Boolean	false	true
rightIcon	右侧的图标箭头	String	arrow-right	-
arrowDirection	右侧箭头的方向，可选值为：left，up，down	String	right	`left`/`up`/`down`
iconStyle	左侧图标样式	`Object`/`String`	-	-
rightIconStyle	右侧箭头图标的样式	`Object`/`String`	-	-
titleStyle	标题的样式	`Object`/`String`	-	-
size	单位元的大小，可选值为large	String	-	-
stop	点击cell是否阻止事件传播	Boolean	true	false
name	标识符，用于在`click`事件中进行返回	`String`/`Number`	-	-

Cell Slot ¶

名称	说明
title	自定义左侧标题部分的内容，如需使用，请勿定义`title`参数，或赋值`null`即可
value	自定义右侧标题部分的内容，如需使用，请勿定义`value`参数，或赋值`null`即可
icon	自定义左侧的图标
right-icon	自定义右侧图标内容，需设置`arrow`为`false`才起作用
label	自定义`label`内容

Cell Event ¶

事件名	说明	回调参数
click	点击cell列表时触发	name: `props`的`name`参数标识符