更新记录

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

• 优化 margin参数的兼容性

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

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

1.4.1（2025-02-07） 下载此版本

• 优化部分脚本代码

平台兼容性

uni-app

其他

分割线组件 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