uView Cell 单元格

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

#平台差异说明

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

#基础功能

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

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

copy

#自定义内容

• 通过插槽icon可以自定义图标，内容会替换左边图标位置
• 通过插槽title定义左边标题部分
• 通过插槽right-icon定义右边内容部分

copy

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

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

#自定义大小

设置size可自定义大小

copy

#展示右箭头

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

copy

#跳转页面

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

copy

#右侧内容垂直居中

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

copy

#自定义插槽

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

    
    	
    		单元格
    		
    		
    	
    
    
    	99
    

copy

/* App.vue */
.cell-hover-class {
	background-color: rgb(235, 237, 238);
}

/* 或者单是设置透明度 */
.cell-hover-class {
	opacity: 0.5;
}