Divider 分割线

介绍

用于将内容分隔为多个区域。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

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="right">文本</van-divider>

虚线

添加 dashed 属性使分割线渲染为虚线。

html

<van-divider dashed>文本</van-divider>

自定义样式

可以直接通过 style 属性设置分割线的样式。

html

<van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  文本
</van-divider>

垂直

html

<van-divider vertical />
文本
<van-divider vertical dashed />
文本
<van-divider vertical :hairline="false" />
文本
<van-divider vertical :style="{ borderColor: '#1989fa' }" />

API

Props

参数	说明	类型	默认值
dashed	是否使用虚线	boolean	`false`
hairline	是否使用 0.5px 线	boolean	`true`
content-position	内容位置，可选值为 `left` `right`	string	`center`
vertical `v4.4.0`	是否使用垂直	boolean	`false`

Slots

名称	说明
default	内容

类型定义

组件导出以下类型定义：

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%	-