Divider 分割线

用一条细线区隔相邻内容，把视觉上的「一个整体」切成有层级的几块。颜色、粗细、间距都通过 CSS 变量下发，改主题色时分割线会自动跟随。注意它的默认方向是纵向，横向分割线必须显式声明。

代码演示

横向分割线

横向分割线需要显式写 :vertical="false"，宽度恒为父容器宽度的 100%。

上方内容区块

下方内容区块

<MDivider /> 默认渲染的是纵向线，所以水平方向必须写 :vertical="false"。

divider/basic.vue

源码

<script setup lang="ts">
const blocks = ['上方内容区块', '下方内容区块']
</script>

<template>
  <div class="m-row-demo--stretch">
    <span>{{ blocks[0] }}</span>
    <MDivider :vertical="false" />
    <span>{{ blocks[1] }}</span>
  </div>
</template>

纵向分割线（默认）

纵向线的高度是父容器的 100%，所以父容器必须有确定高度，否则线会塌成 0。

这里把分割线放进一个高 48px 的 flex 行里，当成图标之间的分隔符使用。

divider/vertical.vue

源码

<script setup lang="ts">
import { mdiContentCopy, mdiDeleteOutline, mdiPencilOutline } from '@mdi/js'
</script>

<template>
  <!-- 纵向分割线高度为 100%，父容器必须有确定高度 -->
  <div class="m-row-demo" style="height: 48px">
    <MIcon :path="mdiPencilOutline" :size="20" />
    <MDivider />
    <MIcon :path="mdiContentCopy" :size="20" />
    <MDivider />
    <MIcon :path="mdiDeleteOutline" :size="20" />
  </div>
</template>

颜色、粗细与间距

color、size、gap 三个属性会分别写进 --m-divider-color、--m-divider-size、--m-divider-gap。

默认：1px / --m-border / 上下间距 8px

主色 2px，上下间距 20px

错误色 4px，间距为 0

size 必须带单位（如 2px），gap 在横向线里表现为上下外边距、在纵向线里表现为左右外边距。

divider/custom.vue

源码

<script setup lang="ts">
interface Case {
  label: string
  color?: string
  size?: string
  gap?: string
}

const cases: Case[] = [
  { label: '默认：1px / --m-border / 上下间距 8px' },
  { label: '主色 2px，上下间距 20px', color: 'var(--m-primary)', size: '2px', gap: '20px' },
  { label: '错误色 4px，间距为 0', color: 'var(--m-error)', size: '4px', gap: '0' },
]
</script>

<template>
  <div class="m-row-demo--stretch">
    <template v-for="item in cases" :key="item.label">
      <span>{{ item.label }}</span>
      <MDivider :vertical="false" :color="item.color" :size="item.size" :gap="item.gap" />
    </template>
  </div>
</template>

列表分隔

在纵向堆叠的列表里用分割线切开每一项，是它最常见的用法。

账户设置

通知偏好

安全与登录

关于本产品

循环渲染列表项，除最后一项外都插入一条分割线。

divider/list.vue

源码

<script setup lang="ts">
const items = ['账户设置', '通知偏好', '安全与登录', '关于本产品']
</script>

<template>
  <div class="m-row-demo--stretch">
    <template v-for="(item, index) in items" :key="item">
      <span>{{ item }}</span>
      <MDivider v-if="index < items.length - 1" :vertical="false" gap="10px" />
    </template>
  </div>
</template>

API

Props

属性	类型	默认值	说明
vertical	boolean	true	是否纵向。默认为 true，纵向时高度 100%、使用左边框；横向需显式传 false
color	string	undefined（回退 var(--m-border)）	线条颜色，下发到 --m-divider-color
size	string	undefined（回退 '1px'）	线条粗细，下发到 --m-divider-size；需要带单位
gap	string	'8px'	间距，下发到 --m-divider-gap；横向为上下外边距，纵向为左右外边距
width	string	undefined	声明了但实现中未引用（横向宽度恒为 100%）
height	string	'0'	声明了但实现中未引用（横向高度恒为 0）

Events

无。

Slots

无。

使用建议

靠 CSS 变量定制，不靠新属性

组件把 color / size / gap 转成三个 CSS 变量再消费。需要更细的控制（虚线、渐变、动画）时，直接在自己的样式里覆盖 --m-divider-color 等变量或给容器加类名更省事，不必等组件加新属性。

<MDivider :vertical="false" color="var(--m-success)" size="2px" gap="16px" />

vertical 默认是 true，这一点最容易踩

<MDivider /> 默认渲染纵向线，横向写法必须显式声明：

<!-- 纵向：高度撑满父容器，父容器需要有确定高度 -->
<MDivider />

<!-- 横向：必须显式写 false -->
<MDivider :vertical="false" />

如果直接写 <MDivider /> 却发现「什么都没显示」，通常是因为父容器没有高度，纵向线被压成了 0。

width / height 两个属性目前不生效

width 与 height 都已声明在 props 里，但实现中并未使用：横向线宽度恒为容器的 100%、高度恒为 0，纵向线高度恒为 100%、宽度恒为 0。想改尺寸请通过间距和容器的尺寸来控制，不要指望这两个属性。

相关组件

• Icon 图标：纵向分割线常用来分隔一排图标。
• ButtonGroup 按钮组：如果目的是把按钮拼成整体，用按钮组而不是分割线。