Line 线条 ¶

此组件一般用于显示一根线条，用于分隔内容块，有横向和竖向两种模式，且能设置0.5px线条，使用也很简单。

平台差异说明 ¶

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

基本使用 ¶

组件内部有预置的参数，直接使用即可，有如下几个参数需要了解：

color为线条的颜色
direction为线条的方向，默认为横向
length参数需要特别留意，它需要带上单位，比如设置为"50%"，"500rpx"等，在线条为横向时，表现为线条的长度；在线条为竖向时，表现为线条的高度。

html

<template>
	/* 基础使用 */
	<up-line></up-line>
	
	/* 自定义颜色 */
	<up-line color="#2979ff"></up-line>
	
	/* 自定义线条方向 */
	<up-line direction="col"></up-line>
	
	/* 自定义线条长度 */
	<up-line length="50%"></up-line>
</template>

是否虚线 ¶

dashed控制线条是否虚线：

html

<template>
	<up-line dashed></up-line>
</template>

此页面源代码地址 ¶

页面源码地址

github

gitee

API ¶

Props ¶

参数	说明	类型	默认值	可选值
color	线条的颜色	String	#d6d7d9	-
length	长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带rpx单位的值等	String \| Number	100%	-
direction	线条的方向，`row`-横向，`col`-竖向	String	row	col
hairline	是否显示细边框	Boolean	true	false
margin	线条与上下左右元素的间距，字符串形式，如"30rpx"、"20rpx 30rpx"，默认单位px	String \| Number	0	-
dashed	是否虚线，false-实线，true-虚线	Boolean	false	true