Divider 分割线 V1.1.0+

概述

Divider 分割线，可自定义线条宽度、颜色等。

支持平台

目前开发小程序与H5推荐使用 FirstUI nvue版本 (opens new window)。

安卓系统版本	安卓uni-app	安卓uniapp-x	iOS系统版本	iOS uniapp	iOS uniapp-x	小程序	H5/Web
5.0	×	✓	9.0	×	×	×	✓

引入

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

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

import fuiDivider from "@/components/firstui/fui-divider/fui-divider.uvue"
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	divider占据高度，单位rpx	100	-
width	String	divider宽度，参数值需要带单位	400rpx	-
dividerColor	String	divider颜色	#CCCCCC	-
color	String	提示文字颜色	#B2B2B2	-
size	Number	提示文字大小，单位rpx	24	-
fontWeight	String	提示文字字重，可选值：normal、bold	normal	-
backgroundColor	String	背景颜色，和当前页面背景色保持一致	#F1F4FA	-

Events

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

示例预览

示例代码地址

Divider 分割线