Vant Divider 分割線

2022-05-31 13:35 更新

引入

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>

API

Props

參數(shù)說明類型默認(rèn)值
dashed是否使用虛線booleanfalse
hairline是否使用 0.5px 線booleantrue
content-position內(nèi)容位置,可選值為left rightstringcenter

Slots

名稱說明
default內(nèi)容


實例演示

以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號