uview-plus

# Cell 单元格

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

# 平台差异说明

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

# 基础功能

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

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

<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定义右边内容部分
<up-cell-group>
	<up-cell  title="夕阳无限好" arrow-direction="down">
		<template #icon>
			<up-icon size="32" name="search"></up-icon>
		</template>
		<!-- <up-badge count="99" :absolute="false" slot="right-icon"></up-badge> -->
		<template #right-icon>
			<up-switch v-model="checked"></up-switch>
		</template>
	</up-cell>
	<up-cell icon="setting-fill" title="只是近黄昏"></up-cell>
</up-cell-group>

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

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

# 自定义大小

设置size可自定义大小


<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控制箭头的方向

<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设置跳转地址

<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，可将右侧内容垂直居中

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

# 自定义插槽

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

<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>

/* 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-plus封装的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参数标识符

← Badge 徽标数 →