mView

Cell 单元格

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

平台差异说明

App(vue)App(nvue)H5小程序
√×√√

基础功能

  • 该组件需要搭配cell-group使用，并由它实现列表组的上下边框，如不需要上下边框，配置cellGroup的border参数为false即可。
  • 通过title设置左侧标题，value设置右侧内容。
  • 通过icon字段设置图标。
<m-cell-group>
    <view
        slot="title"
        class="m-cell-title"
    >
        基础功能
    </view>
    <m-cell
        title="单元格"
        label="描述信息"
        is-link
    />
    <m-cell
        icon="home"
        title="单元格"
        value="内容"
    />
</m-cell-group>

自定义内容

  • 通过插槽icon可以自定义图标，内容会替换左边图标位置
  • 通过插槽title定义左边标题部分
  • 通过插槽right-icon定义右边内容部分
<m-cell-group>
    <m-cell
        title="单元格"
    >
        <template #icon>
            <m-icon
                size="24"
                name="search"
            />
        </template>
        <template #right-icon>
            (#^.^#)
        </template>
    </m-cell>
    <m-cell
        icon="scan"
        title="内容"
    />
</m-cell-group>

自定义大小

设置size可自定义大小

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

展示右箭头

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

<m-cell-group>
    <m-cell
	    icon="home"
	    title="单元格"
	    :is-link="true"
	    arrow-direction="down"
	/>
	<m-cell
	    icon="add"
	    title="单元格"
	    :is-link="false"
	/>
</m-cell-group>

跳转页面

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

<m-cell-group>
    <m-cell
        title="打开图标"
        isLink
        url="/pages/icon/icon"
    ></m-cell>
    <m-cell
        title="打开颜色"
        isLink
        url="/pages/color/color"
    ></m-cell>
</m-cell-group>

右侧内容垂直居中

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

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

自定义插槽

<m-cell-group>
    <m-cell value="内容">
        <template #title>
            <view
                class="m-slot-title"
            >
                <text class="m-cell-text">
                    单元格
                </text>
            </view>
        </template>
    </m-cell>
    <m-cell
        title="单元格"
        is-link
    >
        <template #value>
            <text
                class="m-slot-value"
            >
                99
            </text>
        </template>
    </m-cell>
</m-cell-group>

.m-slot-value {
    background-color: $m-error;
    border-radius: 6px;
    padding: 2px 4px;
    color: white;
}

API

CellGroup Props

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

CellGroup Slot

名称说明
title自定义分组标题

Cell Props

参数说明类型默认值可选值
title左侧标题String | Number--
label标题下方的描述信息String | Number--
value右侧的内容String | Number--
icon左侧图标名称String--
disabled是否禁用cellBooleanfalsetrue
border是否显示下边框Booleantruefalse
center内容是否垂直居中(主要是针对右侧的value部分)Booleanfalsetrue
url点击后跳转的URL地址String--
linkType链接跳转的方式StringnavigateTo$m.route跳转方式
clickable是否开启点击反馈(表现为点击时加上灰色背景)Booleanfalsetrue
isLink是否展示右侧箭头并开启点击反馈Booleanfalsetrue
rightIcon右侧的图标箭头Stringarrow-right-
arrowDirection右侧箭头的方向Stringrightleft | up | down
iconStyle左侧图标样式Object | String--
rightIconStyle右侧箭头图标的样式Object | String--
titleStyle标题的样式Object | String--
size单位元的大小String-large
stop点击cell是否阻止事件传播Booleantruefalse
name标识符，用于在click事件中进行返回String | Number--

Cell Slot

名称说明
title自定义左侧标题部分的内容，如需使用，请勿定义title参数，或赋值转换为Boolean false 值即可
value自定义右侧标题部分的内容，如需使用，请勿定义value参数，或赋值转换为Boolean false 值即可
icon自定义左侧的图标
right-icon自定义右侧图标内容
label自定义label内容

Cell Event

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