Divider 分割线

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

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>

名称	说明
default	内容

组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考主题定制。