UniApp组件开发七日通-单元格(cell)

我在书社写代码
158 阅读4分钟

首先看模板部分，组件是一个包含标题、图标和右侧内容的单元格。根据props，有title、value、link、border和icon等属性。link控制右侧箭头显示，border控制下边框。

<view class="cell " :class="{'cell-active':prop.link,'cell-border':prop.border}" @click="emit('click',$event)">
		<view class="cell-title">
			<h-icon class="cell-icon" :name="prop.icon" v-if="prop.icon"></h-icon>
			{{prop.title}}
		</view>
		<view class='cell-value' :class="{'cell-link':prop.link}">
			<slot v-if="$slots.default"></slot>
			<view class="cell-value-title" v-else>{{prop.value}}</view>
		</view>
	</view>

接下来是script部分，定义了TypeScript类型，props的类型包括title、value、link、border、icon，这些都是可选的。emit了一个click事件。

	// type
	type types = {
		title ?: string,
		value ?: string | number,
		link ?: boolean,
		border ?: boolean,
		icon ?: string,
	}
	// prop
	const prop = defineProps<types>()
	// emit
	const emit = defineEmits(['click'])

然后是样式部分，使用了SCSS，包括布局、边框、图标间距和右侧箭头的样式。注意到link类有伪元素实现的箭头，border类有下边框。

.cell {
		font-size: 14px;
		display: flex;
		justify-content: space-between;
		padding: 0 10px;
		line-height: 44px;
		background: #fff;
		position: relative;
		align-items: center;

		&-border {
			border-bottom: solid 1px #f1f1f1;
		}

		&-title {
			flex: 1;
			display: flex;
			align-items: center;
		}

		&-icon {
			margin-right: 4px;
		}

		&-value {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			&-title{
				color: #999;
			}
		}

		&-link {
			padding-right: 8px;
			position: relative;
			box-sizing: border-box;

			&::after {
				content: '';
				width: 6px;
				height: 6px;
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%) rotate(135deg);
				border-left: solid 1px #999;
				border-top: solid 1px #999;
			}
		}
	}

现在需要整理属性表格，包括每个属性的类型、默认值、说明。例如，title是字符串，没有默认值；link和border是布尔值，默认false。事件方面只有click事件。

样式逻辑部分需要描述布局方式（flex布局，两端对齐）、边框条件、图标间距、右侧箭头如何实现，以及禁用状态等。注意到link为true时，右侧会有箭头，使用伪元素的边框旋转实现。

使用示例部分，要展示基础用法、带图标的、带边框的、带箭头的例子。同时需要说明依赖关系，比如需要h-icon组件，以及样式使用了SCSS。

检查是否有遗漏的props或功能，比如disabled状态在代码中没有体现，可能用户之前的h-button有，但h-cell没有，所以不能加入。确保文档准确反映当前代码。

最后，按照之前的h-button文档格式组织内容，保持一致性。确认所有属性和事件都被涵盖，示例代码正确无误，没有假设未实现的功能。

h-cell 组件文档

1. 组件概述

h-cell 是一个基于 Vue 3 的跨端单元格组件（适用于 uni-app 框架），主要用于展示列表项信息。支持标题、图标、右侧内容、箭头指示和下边框等功能。

2. 组件属性

属性名类型默认值说明
titlestring-左侧标题文字内容
valuestring|number-右侧显示内容（当没有 slot 内容时生效）
linkbooleanfalse是否显示右侧箭头指示
borderbooleanfalse是否显示下边框
iconstring-左侧图标名称（需配合 h-icon 组件使用）

3. 组件事件

事件名说明参数
click单元格点击时触发原生事件对象 $event

4. 样式逻辑说明

4.1 布局结构

  • 采用 flex 布局实现左右内容排列
  • 默认左右内容区域等分空间（flex: 1）
  • 右侧内容默认右对齐（justify-content: flex-end）

4.2 边框控制

  • 通过 border 属性控制是否显示 1px #f1f1f1 的下边框
  • 边框使用相对定位实现，不影响布局

4.3 箭头指示

  • link=true 时右侧显示旋转 135° 的边框箭头
  • 箭头通过伪元素 ::after 实现
  • 箭头颜色与右侧文字颜色一致（#999）

4.4 图标显示

  • 图标与标题间距为 4px
  • 图标尺寸继承父级字体大小

4.5 交互状态

  • 点击时无特殊样式变化（可根据需要自行扩展）

5. 使用示例

基础用法

<!-- 简单单元格 -->
<h-cell title="姓名" value="张三"></h-cell>

<!-- 带图标单元格 -->
<h-cell title="手机号" icon="phone" value="138****8888"></h-cell>

<!-- 带边框单元格 -->
<h-cell title="地址" border value="北京市朝阳区"></h-cell>

<!-- 带箭头指示 -->
<h-cell title="更多设置" link></h-cell>

自定义插槽

<!-- 自定义右侧内容 -->
<h-cell title="订单状态">
  <text class="status-text">已发货</text>
</h-cell>

6. 依赖说明

  • 需配合 h-icon 组件使用（用于显示 icon 属性对应的图标）

  • 样式使用 SCSS 预处理器编写，需确保项目已配置 SCSS 编译环境

  • 基础字号为 14px，行高固定为 44px

avatar
文章
阅读
粉丝