分隔符

Divider分隔符:可设置占据高度,线条宽度,颜色等。

组件结构

<template>
	<view class="tui-divider" :style="{ height: height + 'rpx' }">
		<view class="tui-divider-line" :style="{ width: width, background: getBgColor(gradual, gradualColor, dividerColor) }"></view>
		<view
			class="tui-divider-text"
			:style="{ color: color, fontSize: size + 'rpx', lineHeight: size + 'rpx', backgroundColor: backgroundColor, fontWeight: bold ? 'bold' : 'normal' }"
		>
			<slot></slot>
		</view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiDivider",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
height Number divider占据高度 单位rpx 100
width String divider宽度,可填写具体长度,如400rpx 100%
dividerColor String divider颜色,如果为渐变线条,此属性失效 #e5e5e5
color String 文字颜色 #999
size Number 文字大小 单位rpx 24
bold Boolean 文字是否加粗 false
backgroundColor String 背景颜色,和当前页面背景色保持一致 #fafafa
gradual Boolean 是否为渐变线条,为true,divideColor失效 false
gradualColor Array 渐变色值,to right ,提供两个色值即可,由浅至深 ['#eee', '#ccc']

methods

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/divider/divider

H5二维码

小程序二维码