m-cell 单元格

简述

列表单元格，常用于设置页菜单项。

注意

请以 uni_modules/m-unix 与本文为准；各端差异以 uni-app 与各平台官方文档为准。涉及隐私能力（相册、定位、剪贴板、手机号等）需在 manifest 与后台完成配置。

平台差异说明

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

演示地址

与线上 H5 演示基座 分包一致（文档站右下角预览 iframe 亦指向同一路径）。

类型	地址
分包路径	pages_demo/cell/cell
线上 H5（hash）	打开演示

基本使用

<template>
	<view>
		<m-cell
			label="用户名"
			value="zhangsan"
			is-link
			@click="handleClick"
		/>
	</view>
</template>

Props

参数	说明	类型	默认值
title	左侧主标题；与 label 同时存在时，label 可作副标题（见源码 actualTitle / actualLabel）	string	''
label	无 title 时作主标题；与 title 同时存在且未设 brief 时作副标题	string	''
value	右侧展示文案	string	''
brief	标题下方说明（优先级高于「双标题」里的 label 副标题）	string	''
disabled	是否禁止点击与跳转	boolean	false
border	是否显示下边框	boolean	true
center	是否垂直居中对齐	boolean	false
isLink	是否显示右侧箭头；为 true 且 url 非空时按 linkType 跳转	boolean	false
linkType	跳转方式，见下表	string	navigateTo
url	跳转路径（需配合 isLink）	string	''
icon	左侧图标名（传入 m-icon 的 name）；也可用 icon 插槽自定义	string	''
customStyle	合并到根节点样式	object	{}

linkType 可选值

值	说明
navigateTo	uni.navigateTo
redirectTo	uni.redirectTo
switchTab	uni.switchTab

Events

事件名	说明	回调参数
click	点击单元格；disabled 时不触发；跳转在点击后执行	原生事件

插槽

名称	说明
default	左侧标题内容（替换 label）
icon	左侧图标插槽
right	右侧内容插槽

示例

基础用法

<m-cell label="姓名" value="张三"></m-cell>
<m-cell label="手机" value="138****8888"></m-cell>

带简介

<m-cell
	label="姓名"
	value="张三"
	brief="简介文字"
></m-cell>

链接样式

<m-cell
	label="关于我们"
	is-link
	@click="goAbout"
></m-cell>

居中对齐

<m-cell
	label="头像"
	center
>
	<image slot="right" :src="avatar" style="width: 80rpx; height: 80rpx; border-radius: 50%;" />
</m-cell>