UniApp组件开发七日通-分组(group)

我在书社写代码
192 阅读3分钟

首先看模板部分，组件包含一个外层的view，类名为group。内部有一个group-title的view，当title存在时显示prop.title。然后是group-body的view，根据prop的inset和border属性添加不同的类名，用于控制样式。

<view class="group">
		<view class="group-title" v-if="title">{{prop.title}}</view>
		<view :class="{'group-body':true, 'group-inset':prop.inset,'group-border':prop.border}">
			<slot></slot>
		</view>
	</view>

接下来是脚本部分，使用TypeScript和setup语法。定义了一个类型types，包含可选的title（字符串）、inset（布尔值）、border（布尔值）。然后通过defineProps声明了这些属性。

// type
	type types = {
		title ?: string,
		inset ?: boolean,
		border?:boolean
	}
	// prop
	const prop = defineProps<types>()

样式部分使用SCSS，scoped。定义了group的各种子类，如group-body、group-border、group-title、group-inset，分别控制不同的样式，比如背景色、边框、圆角等。

.group {
		
		&-body{
			overflow: hidden;
			background: #f1f1f1;
			display:grid;
		}
		&-border {
			gap:1px;
			border:solid 1px #f1f1f1;
		}
		 
		&-title {
			padding:8px 10px;
			line-height: normal;
			padding-top: 0;
			color: #666;
			font-size: 14px;
		}
		&-inset {
			background: #eee;
			display: flex;
			flex-direction: column;
			border-radius: 5px;
			overflow: hidden;
			margin: 0 10px;
		 
		}
		 
	}

现在需要将这些信息整理成Markdown文档，包括组件描述、属性说明、样式说明等部分。需要确保文档清晰，用户能快速了解组件的使用方法和效果。

首先，组件名称是h-group，属于uni-app的自定义组件。功能是用于内容分组，支持标题显示、圆角卡片风格（inset）和外边框（border）。

属性部分，title是可选的字符串，用于显示分组标题；inset是可选的布尔值，为true时应用圆角卡片样式；border是可选的布尔值，为true时显示外边框。

样式部分需要说明各个类名对应的样式效果，比如group-body的背景色、布局方式，group-inset的圆角和边距，group-border的边框和间隔等。

最后，可能需要提供使用示例，展示如何在模板中使用该组件，并传递不同的属性。

现在将这些内容组织成结构化的Markdown文档，确保信息准确，易于理解。

h-group 分组组件文档

组件概述

h-group 是一个用于内容分组展示的 uni-app 自定义组件，支持标题显示、圆角卡片风格（inset）和外边框（border）等特性，适用于列表项分组、信息区块划分等场景。

组件属性

属性名类型默认值说明
titlestring-分组标题（可选）
insetbooleanfalse是否展示为圆角卡片风格
borderbooleanfalse是否显示外边框

样式说明

组件通过 SCSS 定义了以下核心样式类（作用域内生效）：

外层容器 .group

  • 包裹整个分组内容，无直接样式，主要作为子元素的容器。

标题区域 .group-title

  • 仅当 title 属性存在时显示。
  • 样式：内边距 padding: 8px 10px（顶部内边距 padding-top: 0），字体颜色 #666，字号 14px，行高 normal。

内容区域 .group-body

  • 基础样式：背景色 #f1f1f1，溢出隐藏 overflow: hidden，布局方式 display: grid。
  • 扩展类 .group-inset（当 inset=true 时生效）：背景色 #eee，弹性列布局 display: flex; flex-direction: column，圆角 border-radius: 5px，左右边距 margin: 0 10px。
  • 扩展类 .group-border（当 border=true 时生效）：元素间隔 gap: 1px，外边框 border: solid 1px #f1f1f1。

使用示例

<!-- 基础使用（带标题、外边框） -->
<h-group :title="'用户信息'" :border="true">
  <view>姓名：张三</view>
  <view>年龄：25</view>
</h-group>

<!-- 圆角卡片风格 -->
<h-group :inset="true">
  <view>地址：北京市朝阳区</view>
  <view>联系方式：138-XXXX-XXXX</view>
</h-group>

注意事项

  • 标题 title 为可选属性，不传递时标题区域不会渲染。

  • inset 和 border 可同时生效，但需注意样式叠加效果（如同时设置时，group-inset 的圆角可能与 group-border 的边框配合使用）。

avatar
文章
阅读
粉丝