Divider 分割线

概述

Divider 分割线，可自定义线条宽度、颜色等，支持渐变背景使用。

支持平台

App-vue	App-Nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

引入

以下介绍两种常用的引入方式。

第一种：在页面中引用、注册

import fuiDivider from "@/components/firstui/fui-divider/fui-divider.vue"
export default {
	components:{
		fuiDivider
	}
}

第二种：easycom组件规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手。

如果不了解easycom，可先查看 官网文档 (opens new window)。

代码演示

部分示例演示，完整使用请参考示例程序以及文档API。

基础使用

通过 text 属性设置提示内容。

<fui-divider text="没有更多了"></fui-divider>

修改颜色

通过 dividerColor 属性修改线条颜色，color 属性修改字体颜色。

<fui-divider dividerColor="#FFB703" color="#FFB703" text="没有更多了"></fui-divider>

修改线条宽度

通过 width 属性修改线条宽度。

<fui-divider width="500rpx" text="没有更多了"></fui-divider>

Slots

插槽名称	说明
default	提示信息部分自定义展示内容

Props

属性名	类型	说明	默认值	平台差异说明
text	String	提示内容	-	-
height	Number,String	divider占据高度，单位rpx	100	-
width	String	divider宽度	400rpx	-
dividerColor	String	divider颜色	#CCCCCC	-
color	String	提示文字颜色	#B2B2B2	-
size	Number, String	提示文字大小，单位rpx	24	-
fontWeight	Number, String	提示文字字重	400	-
backgroundColor v2.4.0+移除	String	背景颜色，和当前页面背景色保持一致	#F1F4FA	v2.4.0+之后不再需要此属性

Events

事件名	说明	回调参数
-	-	-

示例预览

示例代码地址

Divider 分割线