@tanzhenxing/zx-group NPM

zx-group 组件

基于 uni-group 实现的分组容器，支持 H5、小程序、App，适用于表单、内容分区等场景。

组件特性

支持主标题、分组间隔、卡片模式
支持自定义标题插槽
兼容多端（H5/小程序/App）
使用 Vue3 <script setup> 语法

属性（Props）

属性名	类型	默认值	说明
title	String	''	分组主标题
top	Number/String	10	分组与上方间隔（单位px）
mode	String	'default'	分组模式，card为卡片模式
stat	Boolean	false	是否开启uni统计（可选）

插槽（Slots）

名称	说明
title	自定义标题内容
默认	分组内容区域

基本用法

<zx-group title="基础分组" top="20">
  <view>分组内容1</view>
  <view>分组内容2</view>
</zx-group>

卡片模式

<zx-group title="卡片分组" mode="card" top="20">
  <view>卡片分组内容1</view>
  <view>卡片分组内容2</view>
</zx-group>

自定义标题插槽

<zx-group :top="30">
  <template #title>
    <view style="color: #007AFF; font-weight: bold;">自定义标题插槽</view>
  </template>
  <view>自定义标题内容1</view>
  <view>自定义标题内容2</view>
</zx-group>

组件引入

import zxGroup from '@/components/zx-group/zx-group.vue';

注意事项

示例需在 uni-app 项目中运行。
如需统计功能，需配合 uni.report 使用。

参考文档

uni-group 官方文档

1 month ago

2 months ago