Divider 分割线 - Vant 4
➖ Divider 分割线
📏 介绍
页面内容太拥挤？需要一条优雅的"分界线"来整理秩序？Divider 分割线组件就是你的页面整理大师！✨ 它能在内容之间画出清晰的分界线，让页面布局井井有条，就像给房间添加了隔断墙一样，既实用又美观！
无论是水平分割还是垂直分割，实线还是虚线，Divider 都能轻松胜任，让你的页面告别杂乱无章！
📦 引入
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
js
import { createApp } from 'vue';
import { Divider } from 'vant';
const app = createApp();
app.use(Divider);🎯 代码演示
🔧 基础用法
最简单的分割线，一条横线搞定所有分割需求！简约而不简单～
html
<van-divider />📝 展示文本
想在分割线上加点"标签"？通过插槽可以在分割线中间插入文字，让分割更有意义！
html
<van-divider>分割线文字</van-divider>📍 内容位置
文字不想居中？没问题！通过 content-position 属性，让文字在分割线上自由"游走"～
html
<van-divider content-position="left">左侧文字</van-divider>
<van-divider content-position="center">居中文字</van-divider>
<van-divider content-position="right">右侧文字</van-divider>💫 虚线样式
想要更有设计感的分割线？添加 dashed 属性，让分割线变成时尚的虚线样式！
html
<van-divider dashed>虚线分割</van-divider>🎨 自定义样式
想要个性化的分割线？直接通过 style 属性，给分割线穿上专属的"时装"！
html
<van-divider
:style="{
color: '#1989fa',
borderColor: '#1989fa',
padding: '0 16px'
}"
>
蓝色分割线
</van-divider>📐 垂直分割
有时候需要竖着的分割线？设置 vertical 属性，让分割线"站"起来！
html
<div style="display: flex; align-items: center;">
<span>左侧内容</span>
<van-divider vertical />
<span>右侧内容</span>
</div>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dashed | 是否使用虚线样式（时尚虚线 vs 经典实线） | boolean | false |
| hairline | 是否使用 0.5px 细线（超细线条，更精致） | boolean | true |
| content-position | 内容位置，可选值为 left right center | string | center |
vertical v4.4.0 | 是否使用垂直方向（让分割线"站"起来） | boolean | false |
Slots
| 名称 | 说明 |
|---|---|
| default | 分割线中间的内容（给分割线加个"标签"） |
类型定义
组件导出以下类型定义：
ts
import type { DividerProps, DividerContentPosition } from 'vant';🎨 主题定制
样式变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-divider-margin | var(--van-padding-md) 0 | 水平分割线的外边距 |
| --van-divider-vertical-margin | 0 var(--van-padding-xs) | 垂直分割线的外边距 |
| --van-divider-text-color | var(--van-text-color-2) | 分割线文字颜色 |
| --van-divider-font-size | var(--van-font-size-md) | 分割线文字大小 |
| --van-divider-line-height | 24px | 分割线文字行高 |
| --van-divider-border-color | var(--van-border-color) | 分割线颜色 |
| --van-divider-content-padding | var(--van-padding-md) | 分割线文字内边距 |
| --van-divider-content-left-width | 10% | 左侧分割线宽度 |
| --van-divider-content-right-width | 10% | 右侧分割线宽度 |
💡 使用技巧
- 内容分组：在表单、列表中分隔不同类型的内容
- 视觉层次：通过分割线建立清晰的信息层级
- 导航分隔：在导航栏中分隔不同的功能区域
- 装饰元素：作为页面装饰，增强设计感