Vant 中文入门教程 Vant Divider 分割线

2024-02-25 开发教程 Vant 中文入门教程 匿名 5

引入

import Vue from 'vue';
import { Divider } from 'vant';
Vue.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>

API

Props

参数说明类型默认值
dashed是否使用虚线booleanfalse
hairline是否使用 0.5px 线booleantrue
content-position内容位置,可选值为leftrightstringcenter

Slots

名称说明
default内容

实例演示