引入

import Vue from 'vue';
import { Divider } from 'vant';

Vue.use(Divider);

基礎(chǔ)用法

默認(rèn)渲染一條水平分割線。

<van-divider />

展示文字

通過插槽在可以分割線中間插入內(nèi)容。

<van-divider>文字</van-divider>

內(nèi)容位置

通過 content-position 指定內(nèi)容所在位置。

<van-divider content-position="left">文字</van-divider>
<van-divider content-position="right">文字</van-divider>

虛線

添加 dashed 屬性使分割線渲染為虛線。

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

自定義樣式

可以直接通過 style 屬性設(shè)置分割線的樣式。

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

Props

Slots

樣式變量

組件提供了下列 Less 變量，可用于自定義樣式，使用方法請參考主題定制。