Divider 分割线
区隔内容的分割线。支持横向与纵向、三种线型，以及线上带文字。
基础用法
上方内容
下方内容
vue
<p>上方内容</p>
<SrDivider />
<p>下方内容</p>带文字
文字会被放在分割线中间，两侧的线自动断开。
居中文案
靠左
靠右
vue
<SrDivider content-position="center">居中文案</SrDivider>
<SrDivider content-position="left">靠左</SrDivider>
<SrDivider content-position="right">靠右</SrDivider>线型
实线（默认）
虚线
点线
vue
<SrDivider type="solid">实线</SrDivider>
<SrDivider type="dashed">虚线</SrDivider>
<SrDivider type="dotted">点线</SrDivider>纵向分割线
用于区隔同一行内的若干项，高度由父容器的 align-items 撑开。
编辑复制删除
vue
<div class="sr-demo">
<span>编辑</span>
<SrDivider direction="vertical" />
<span>复制</span>
</div>纵向分割线需要父容器有高度
它靠 align-self: stretch 撑高。若父容器是 align-items: center， 它会退化成一条很短的线——此时给父容器加 align-items: stretch， 或给分割线显式设高度。
为什么不直接写 <hr>
<hr> 也有语义，但没法做这两件事：
- 线上放文字——需要把线拆成两段，
<hr>是单元素做不到； - 纵向分割——
<hr>的语义是「主题的分隔」，纵向场景用它并不合适。
因此这里统一用 <div role="separator">，语义靠 ARIA 补上， 视觉与语义都不丢。
Props
| 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
direction | 'horizontal' | 'vertical' | 'horizontal' | 方向 |
type | 'solid' | 'dashed' | 'dotted' | 'solid' | 线型 |
contentPosition | 'left' | 'center' | 'right' | 'center' | 文字位置（仅横向、且有内容时生效） |
插槽
| 名称 | 说明 |
|---|---|
default | 分割线上的文字，不传则渲染一条完整的分割线 |
无障碍
- 使用
role="separator"而非role="presentation"：分割线在语义上是 「内容分组边界」，读屏软件播报出来是有意义的 - 纵向分隔时附带
aria-orientation="vertical"，与视觉方向保持一致