Divider 分割线

用于分隔内容的分割线组件，支持水平/垂直方向、文字对齐和多种线条样式。

基础用法

默认渲染为水平分割线。

第一段内容

第二段内容

<template>
  <div>
    <p>第一段内容</p>
    <ZcDivider />
    <p>第二段内容</p>
  </div>
</template>

带文字的分割线

使用默认插槽添加文字，通过 contentPosition 控制对齐方式。

左对齐文字

居中文字

右对齐文字

<template>
  <div>
    <ZcDivider content-position="left">左对齐文字</ZcDivider>
    <ZcDivider content-position="center">居中文字</ZcDivider>
    <ZcDivider content-position="right">右对齐文字</ZcDivider>
  </div>
</template>

垂直分割线

通过 direction 属性设置为 vertical，在行内元素之间使用。

文本一

链接

文本二

<template>
  <div style="display: flex; align-items: center;">
    <span>文本一</span>
    <ZcDivider direction="vertical" />
    <a href="#">链接</a>
    <ZcDivider direction="vertical" />
    <span>文本二</span>
  </div>
</template>

虚线样式

通过 dashed 属性或 borderStyle 属性设置线条样式。

虚线带文字

点线样式

<template>
  <div>
    <ZcDivider />
    <ZcDivider dashed>虚线带文字</ZcDivider>
    <ZcDivider border-style="dotted">点线样式</ZcDivider>
  </div>
</template>

Divider API

Props

参数	说明	类型	默认值
direction	分割线方向	'horizontal' | 'vertical'	'horizontal'
contentPosition	文字对齐（水平方向有效）	'left' | 'center' | 'right'	'center'
borderStyle	线条样式	'solid' | 'dashed' | 'dotted' | 'double'	'solid'
dashed	是否为虚线（快捷设置）	boolean	false

Slots

插槽名	说明
default	分割线上的文字内容（仅水平方向）