WU-UI

中文

English

中文

English

Appearance

Cell 单元格 ​

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

平台兼容性 ​

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

基本使用 ​

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

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

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

自定义内容 ​

  • 通过插槽 icon 可以自定义图标，内容会替换左边图标位置
  • 通过插槽 title 定义左边标题部分
  • 通过插槽 right-icon 定义右边内容部分
html
<wu-cell-group>
	<wu-cell  title="夕阳无限好" arrow-direction="down">
		<wu-icon slot="icon" size="32" name="search"></wu-icon>
		<wu-switch slot="right-icon" v-model="checked"></wu-switch>
	</wu-cell>
	<wu-cell icon="setting-fill" title="只是近黄昏"></wu-cell>
</wu-cell-group>
<wu-cell-group>
	<wu-cell  title="夕阳无限好" arrow-direction="down">
		<wu-icon slot="icon" size="32" name="search"></wu-icon>
		<wu-switch slot="right-icon" v-model="checked"></wu-switch>
	</wu-cell>
	<wu-cell icon="setting-fill" title="只是近黄昏"></wu-cell>
</wu-cell-group>

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

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

自定义大小 ​

设置 size 可自定义大小

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

展示右箭头 ​

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

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

跳转页面 ​

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

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

右侧内容垂直居中 ​

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

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

自定义插槽 ​

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

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

API ​

CellGroup Props ​

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

Cell Props ​

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