uv-ui

# Cell 单元格

✈

组件名：uv-cell

点击下载&安装 (opens new window)

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

# 平台兼容性

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

# 基础功能

  • 该组件需要搭配cell-group使用，并由它实现列表组的上下边框，如不需要上下边框，配置cellGroup的border参数为false即可
  • 通过title设置左侧标题，value设置右侧内容
  • 通过icon字段设置图标，或者图片链接(本地文件建议使用绝对地址)
<template>
	<uv-cell-group>
		<uv-cell icon="setting-fill" title="个人设置"></uv-cell>
		<uv-cell icon="integral-fill" title="版本更新" value="已是新版本"></uv-cell>
	</uv-cell-group>
</template>

# 通过slot自定义内容

  • 通过插槽title自定义左边标题部分
  • 通过插槽label自定义左侧标题下面描述内容
  • 通过插槽value自定义右侧值
  • 通过插槽icon自定义左侧图标
  • 通过插槽right-icon自定义右侧图标
<template>
	<uv-cell-group>
		<uv-cell>
			<!-- 自定义左侧标题 -->
			<template v-slot:title>
				<text>检查版本</text>
			</template>
			<!-- 自定义左侧标题下面的内容 -->
			<template v-slot:label>
				<text style="font-size: 28rpx;color: #999;">点击我检查新版本</text>
			</template>
			<!-- 自定义右侧值 -->
			<template v-slot:value>
				<text>已是最新版</text>
			</template>
			<!-- 自定义左侧图标 -->
			<template v-slot:icon>
				<uv-icon size="50rpx" name="search"></uv-icon>
			</template>
			<!-- 自定义右侧图标 -->
			<template v-slot:right-icon>
				<uv-icon size="30rpx" name="arrow-right"></uv-icon>
			</template>
		</uv-cell>
	</uv-cell-group>
</template>

# 展示右箭头

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

<template>
	<uv-cell-group>
		<uv-cell icon="share" title="明月几时有" :isLink="true" arrow-direction="down"></uv-cell>
		<uv-cell icon="map" title="把酒问青天" :isLink="false"></uv-cell>
	</uv-cell-group>
</template>

# 跳转页面

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

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

# 右侧内容垂直居中

通过center属性设置一个布尔值，可将设置右侧value内容是否垂直居中，默认true

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

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# CellGroup Props

参数 说明 类型 默认值 可选值
title 分组标题 String - -
border 是否显示分组标题的下边框 Boolean true true | false
customStyle 用户自定义外部样式 object - -

# Cell Props

参数 说明 类型 默认值 可选值
title 左侧标题 String | Number - -
label 标题下方的描述信息 String | Number - -
value 右侧的内容 String | Number - -
icon 左侧图标名称，或者图片链接(本地文件建议使用绝对地址) String - -
disabled 是否禁用cell Boolean false true | false
border 是否显示下边框 Boolean true true | false
center 内容是否垂直居中(主要是针对右侧的value部分) Boolean false true | false
url 点击后跳转的URL地址 String - -
linkType 链接跳转的方式，内部使用的是uv-ui封装的route方法，可能会进行拦截操作 String navigateTo -
clickable 是否开启点击反馈(表现为点击时加上灰色背景) Boolean false true | false
isLink 是否展示右侧箭头并开启点击反馈 Boolean false true | false
required 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件) Boolean false true | false
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 - large | normal
stop 点击cell是否阻止事件传播 Boolean true true | false
name 标识符，用于在click事件中进行返回 String | Number - -
cellStyle 自定义单元格样式，如：设置padding等样式。如果想在isLink为true状态下不表现出点击态，可以使用此属性设置背景颜色 Object | String - -
customStyle 自定义外部样式，如：设置边框等样式 Object | String - -

# Cell Slots

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

# Cell Events

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

← SwipeAction 滑动单元格 →