用于将内容分隔为多个区域。
通过以下方式来全局注册组件，更多注册方式请参考组件注册。
import { createApp } from 'vue';
import { Divider } from 'vant';
const app = createApp();
app.use(Divider); 默认渲染一条水平分割线。
<van-divider />
通过插槽在可以分割线中间插入内容。
<van-divider>文字</van-divider>
通过 content-position 指定内容所在位置。
<van-divider content-position="left">文字</van-divider>
<van-divider content-position="right">文字</van-divider>
添加 dashed 属性使分割线渲染为虚线。
<van-divider dashed>文字</van-divider>
可以直接通过 style 属性设置分割线的样式。
<van-divider
:style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
文字
</van-divider>
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| dashed | 是否使用虚线 | boolean |
|
| hairline | 是否使用 0.5px 线 | boolean |
|
| content-position | 内容位置，可选值为 | string |
|
| 名称 | 说明 |
|---|---|
| default | 内容 |
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --van-divider-margin | var(--van-padding-md) 0 | - |
| --van-divider-text-color | var(--van-gray-6) | - |
| --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% | - |