mView

Line 线条

平台差异说明

App(vue)App(nvue)H5小程序
√×√√

基本使用

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

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

<!-- 自定义颜色 -->
<m-line color="red" />

<!-- 自定义线条方向 -->
<m-line direction="col" />

<!-- 自定义长度 -->
<m-line length="50%" />

是否虚线

  • dashed控制线条是否虚线：
<m-line dashed />

线条与上下左右元素的间距

注意：必须要带单位不然没效果

<m-line margin="10px 0" />

是否显示细线条

<m-line :hairline="false" />

API

Props

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