Divider 分割线
引入
在app.json
或index.json
中引入组件,默认为ES6
版本,ES5
引入方式参见快速上手
"usingComponents": {
"van-divider": "@vant/weapp/divider/index"
}
Vant Weapp 1.0 版本开始支持此组件,升级方式参见快速上手
代码演示
基础用法
<van-divider />
使用 hairline
<van-divider hairline />
虚线
<van-divider dashed />
文本位置
<van-divider contentPosition="center">文本</van-divider>
<van-divider contentPosition="left">文本</van-divider>
<van-divider contentPosition="right">文本</van-divider>
自定义属性
<van-divider contentPosition="center" textColor="#1989fa">文本颜色</van-divider>
<van-divider contentPosition="center" borderColor="#1989fa">
border 颜色
</van-divider>
<van-divider contentPosition="center" fontSize="18">
字体大小
</van-divider>
自定义样式
<van-divider
contentPosition="center"
customStyle="color: #1989fa; border-color: #1989fa; font-size: 18px;"
>
文本
</van-divider>
API
Props
参数 | 说明 | 类型 | 默认值 | 版本 |
---|---|---|---|---|
dashed | 虚线 | boolean | false | - |
hairline | 细线 | boolean | false | - |
content-position | 文本位置,left center right | string | - | - |
custom-style | 自定义样式 | string | - | - |
Slot
名称 | 说明 |
---|---|
默认 | 自定义文本内容 |