uv-ui

# Divider 分割线

✈

组件名：uv-divider

点击下载&安装 (opens new window)

区隔内容的分割线，用于页面底部“没有更多”的提示等场景。

# 平台兼容性

App（vue） App（nvue） H5 小程序 VUE2 VUE3
√ √ √ √ √ √

# 基本使用

文字内容通过text传入

<uv-divider text="分割线"></uv-divider>

# 设置虚线

可以通过dashed指定虚线

<uv-divider text="分割线" :dashed="true"></uv-divider>

# 设置细线

可以通过hairline指定细线

<uv-divider text="分割线" :hairline="true"></uv-divider>

# 设置以点代替文字

可以通过dot指定以点代替文字

<uv-divider text="分割线" :dot="true"></uv-divider>

# 设置文本靠左靠右

可以通过textPosition指定文字靠左靠右

<uv-divider text="靠左" textPosition="left"></uv-divider>
<uv-divider text="靠右" textPosition="right"></uv-divider>

# 设置文本颜色和线条颜色

可以通过textColor和lineColor指定文字刚线条颜色

<uv-divider text="分割线" textColor="#2979ff" lineColor="#ff0000"></uv-divider>

# 完整示例

完整示例下载地址

https://ext.dcloud.net.cn/plugin?name=uv-ui (opens new window)

# API

# Divider Props

参数 说明 类型 默认值 可选值
dashed 是否虚线 Boolean false true | false
hairline 是否细线 Boolean true true | false
dot 是否以点替代文字，优先于text字段起作用 Boolean false true | false
textPosition 内容文本的位置 String center center | left | right
text 文本内容 String | Number - -
textSize 文本大小 String | Number 14 -
textColor 文本颜色 String #909399 -
lineColor 线条颜色 String #dcdfe6 -

# Divider Events

事件名 说明 回调参数
@click divider组件被点击时触发 -

← 其他小组件 →