更新记录

1.0.1（2025-12-07） 下载此版本

添加预览图片

1.0.0（2025-12-07） 下载此版本

appx-divider 是基于 uni-app + UTS 开发的通用分割线组件，支持自定义文本内容、文本样式、线条样式、左右线条占比等特性，适用于页面内不同模块的分隔场景，兼容微信小程序、App、H5 等多端运行环境。

平台兼容性

uni-app x(4.87)

appx-divider 分割线组件帮助文档

一、组件概述

appx-divider 是基于 uni-app + UTS 开发的通用分割线组件，支持自定义文本内容、文本样式、线条样式、左右线条占比等特性，适用于页面内不同模块的分隔场景，兼容微信小程序、App、H5 等多端运行环境。

二、快速上手

2.1 引入组件

在需要使用组件的页面/组件中导入并注册：

<template>
  <appx-divider text="基础分割线" />
</template>

<script lang="uts" setup>

</script>

2.2 基础用法

展示带默认样式的分割线：

<appx-divider text="模块分隔" />

2.3 自定义样式示例

展示虚线、蓝色线条、加粗文本且左侧线条占比 30% 的分割线：

<appx-divider 
  text="自定义分割线" 
  lineStyle="dotted" 
  lineColor="#409eff" 
  textColor="#409eff" 
  bold 
  lineWidthLeft="30" 
  gap="15" 
/>

三、Props 说明

四、样式说明

1. 组件默认采用 flex 布局，水平居中展示，宽度占满父容器；
2. 分割线高度仅由 lineHeight 控制，无额外高度叠加；
3. 文本区域为固定宽度（flex: none），不会挤压分割线宽度；
4. 当 text 为空时，文本区域不会渲染，仅展示左右对称的分割线。

五、注意事项

1. lineWidthLeft 参数需控制在 0-100 范围内，超出该范围会自动修正为 50，并在控制台输出警告；
2. 线条样式 lineStyle 的兼容性依赖于运行端，部分小程序端对 dotted/dashed 样式的渲染可能存在细微差异；
3. 文本内容若为数字（如 1、2025 等），组件可正常渲染，无需额外转换为字符串。

六、常见问题

Q1：分割线高度显示异常？

A1：组件已移除固定 height 样式，仅通过 border-top 控制高度，若仍有异常，检查是否在父容器中设置了影响布局的样式，或 lineHeight 参数是否设置过大。

Q2：文本与分割线无间距？

A2：检查 gap 参数是否设置为 0，组件默认 gap 为 10px，若手动设置为 0 会导致无间距，可调整该参数值。