Divider 分割线

常用的内容分割线，基于 el-divider 封装，API 完全兼容。

基础用法

这是一段文本

这是另一段文本

查看代码

<template>
  <p>这是一段文本</p>
  <MgDivider />
  <p>这是另一段文本</p>
</template>

带文字的分割线

居中文字

左侧文字

右侧文字

查看代码

<template>
  <MgDivider>居中文字</MgDivider>
  <MgDivider content-position="left">左侧文字</MgDivider>
  <MgDivider content-position="right">右侧文字</MgDivider>
</template>

垂直分割

文本

链接

更多

查看代码

<template>
  <MgSpace>
    <span>文本</span>
    <MgDivider direction="vertical" />
    <span>链接</span>
  </MgSpace>
</template>

自定义样式

虚线

点线

查看代码

<template>
  <MgDivider border-style="dashed">虚线</MgDivider>
  <MgDivider border-style="dotted">点线</MgDivider>
</template>

Attributes

继承 Element Plus Divider 的全部 Attributes，无额外参数。

参数	说明	类型	默认值
direction	分割方向	'horizontal' | 'vertical'	horizontal
content-position	文字位置	'left' | 'center' | 'right'	center
border-style	边框样式	CSSProperties['borderStyle']	solid

与 Element Plus 的差异

MgDivider 在 el-divider 基础上追加 .mg-divider 类名，便于样式覆写；其余行为完全一致，迁移时仅需将 el-divider 替换为 MgDivider。