Divider 分割线

17:06

说明

在内容之间插入一条分割线：默认插槽有内容时线条分列文字两侧，use-slot=false 或未传插槽内容时绘制单条整线。border-color 优先级高于 type，half-width 控制单侧线宽。

兼容性

平台	支持情况
App	⚠️ 部分支持（线条的 0.5px 细线由 transform: scale(1, 0.5) 实现，源码在 App 端跳过，线宽恒为 1px；文字区的 inline-flex 同样仅非 App 生效）
H5	✅ 支持
微信小程序	✅ 支持

示例

基础用法

默认插槽传入文字，线条分列两侧，主题色为 primary。

查看源码

<template>
    <ux-divider>分割线</ux-divider>
</template>

文字颜色 color

color 设置中间文字颜色，不传时取 tips 色。

查看源码

<template>
    <ux-divider color="#f56c6c">分割线</ux-divider>
</template>

线条颜色 border-color

border-color 设置线条颜色，优先级高于 type。

查看源码

<template>
    <ux-divider border-color="#2979ff">分割线</ux-divider>
</template>

主题色 type

type 取 primary / info / success / warning / error，同时改变线条的主题色。

查看源码

<template>
    <view>
        <ux-divider type="success">分割线</ux-divider>
        <ux-divider type="error">分割线</ux-divider>
        <ux-divider type="warning">分割线</ux-divider>
        <ux-divider type="info">分割线</ux-divider>
    </view>
</template>

自定义高度 height

height 设置整个 divider 的高度（px），用于纵向留白与居中。

查看源码

<template>
    <ux-divider height="40">分割线</ux-divider>
</template>

不使用 slot use-slot

use-slot=false 时不渲染中间文字，绘制一条撑满宽度的整线。

查看源码

<template>
    <ux-divider :use-slot="false" />
</template>

自定义半宽 half-width

half-width 控制单侧线宽，数值按 px、带 % 按比例，这里为 100 与 50%。

查看源码

<template>
    <view>
        <ux-divider half-width="100">分割线</ux-divider>
        <ux-divider half-width="50%">分割线</ux-divider>
    </view>
</template>

API

Props

属性	说明	类型	默认值	版本
customStyle	自定义根节点样式	string | UTSJSONObject	-	-
customClass	自定义根节点样式类	string	''	-
halfWidth	单一边divider横线的宽度(数值)，单位px。或者百分比	string | number	75	-
borderColor	divider横线的颜色，如设置，优先级高于type	string	''	-
type	主题色，可以是primary|info|success|warning|error之一值	string	'primary'	-
color	文字颜色	string	''	-
fontSize	文字大小，单位px	string | number	DEFAULT_FONT_SIZE	-
bgColor	整个divider的背景颜色	string	''	-
height	整个divider的高度，单位px	string | number	'auto'	-
marginTop	上边距	string | number	0	-
marginBottom	下边距	string | number	0	-
useSlot	是否使用slot传入内容，如果不用slot传入内容，中间就不会有空隙	boolean	true	-

Events

事件名	说明	回调参数	版本
click	divider组件被点击时触发	-	-

Slots

插槽名	说明	版本
default	分割线中间的文本内容（use-slot 为 true 且传入插槽内容时生效）	-

注意事项

1. 是否绘制中间文字由 useSlot && 默认插槽存在 判定：use-slot=false，或 use-slot=true 但未传插槽内容时，都退化为一条撑满宽度的整线。
2. border-color 优先级高于 type，两者同时设置时以 border-color 为准。
3. height 传字符串 'auto'（默认）时高度自适应，传数值按 px 处理。
4. half-width 传字符串时会判断是否含 %：含 % 按百分比、否则按 px；传数字按 px 处理。
5. 线条的 0.5px 细线依赖 transform，App 端不生效，线宽为 1px。
6. click 事件无回调参数。