更新记录

1.6.1028（2026-10-28） 下载此版本

• 优化 分割线改为真实节点（.o-divider__line）渲染，移除 ::before / ::after 伪元素，兼容 App nvue 及支付宝 / 百度 / 字节 / QQ 等小程序
• 优化 样式改为扁平单类选择器，规避 nvue 不支持后代选择器、伪元素的问题
• 修复 小程序端 class 形式颜色（lineColor="lineBlue"、textColor="Red"）不生效：补充 styleIsolation: 'apply-shared'
• 修复 scoped 默认色特异性高于外部 class 导致颜色被覆盖的问题
• 修复 margin 传非法值（auto、多值、%、em 等）会拼出 padding: autorpx 0 的脏样式
• 增强 margin 支持 String / Number、1~4 值简写、百分比与更多单位
• 修复 插槽只有换行 / 空格 / v-if 为 false 时渲染出空白文字块的问题
• 优化 颜色识别支持 hsl()、var()、--变量、transparent 等写法
• 优化 插槽判定同时兼容 Vue2（$slots）与 Vue3（函数式 $slots、v-cmt 注释节点），插槽异步就绪时自动校正
• 优化 移除行内样式中无意义的 !important

1.5.0615（2025-06-06） 下载此版本

• 优化 margin参数的兼容性

1.5.0606（2025-06-06） 下载此版本

• 更新 以兼容vue3版本
• 优化 scss样式调整为 dart-sass 支持的语法
• 优化 代码响应和兼容效果

平台兼容性

uni-app(3.8.10)

uni-app x(3.8.10)

分割线组件 o-divider

基本用法

<template>
    <view class="p-3">
        <view>基础用法 默认渲染一条水平分割线</view>
        <o-divider />

        <view>展示文字 通过插槽在可以分割线中间插入内容</view>
        <o-divider>文字默认用法</o-divider>

        <view>内容位置 通过 align 指定内容所在位置，自定义上下间距。</view>
        <o-divider align="left" margin="10rpx">居左并自定义间距</o-divider>

        <view>野径云俱黑，江船火独明。晓看红湿处，花重锦官城。</view>
        <o-divider align="right" textColor="#f90">居右效果</o-divider>

        <view>好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。</view>
        <o-divider textColor="Red" lineColor="rgba(156,39,176,0.5)">自定义颜色</o-divider>

        <view>好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。</view>
        <o-divider dashed lineColor="lineBlue">虚线</o-divider>

        <view>好雨知时节，当春乃发生。随风潜入夜，润物细无声。</view>
        <o-divider lineColor="#39f">
            <view class="Red">多行效果</view>
            <view class="">第二行文字长点看看</view>
        </o-divider>

    </view>
</template>

<style>
    page{background-color: #fff;}
    .p-3{padding:30rpx;}
    .Red{color: #f00;font-weight: 500;}
    .Blue{color:blue;}
    .lineBlue{border-color: dodgerblue;}
</style>

API

oDivider Props

兼容性说明

• 传 style 值（#fff、rgb()、rgba()、hsl()、var(--x)、transparent 等）时以行内样式注入，任何平台都生效。
• 传 class 名（如 lineColor="lineBlue"）时，类名会同时挂到根节点和分割线节点上；小程序端已开启 styleIsolation: 'apply-shared'，页面 / 全局样式可以作用到组件内部。注意：小程序里 class 必须定义在页面或全局样式中，不能定义在父组件的 scoped 样式里。
• 分割线由真实节点 .o-divider__line 渲染（不再使用 ::before / ::after 伪元素），因此在 App nvue、支付宝 / 百度 / 字节 / QQ 小程序等伪元素支持不完整的平台上表现一致。如果你的业务代码自行覆盖过 .o-divider::before，请改为覆盖 .o-divider__line。
• 插槽只包含换行、空格或 v-if 为 false 的内容时，不会再渲染空的文字容器（不会出现多余留白）。