外观
Line 线条
约 380 字大约 1 分钟
2025-10-31
此组件一般用于显示一根线条,用于分隔内容块,有横向和竖向两种模式,且能设置0.5px线条,使用也很简单。
基本使用
组件内部有预置的参数,直接使用即可,有如下几个参数需要了解:
color为线条的颜色direction为线条的方向,默认为横向length参数需要特别留意,它需要带上单位,比如设置为"50%","500rpx"等,在线条为横向时,表现为线条的长度;在线条为竖向时,表现为线条的高度。
<template>
<!-- 基础使用 -->
<un-line></un-line>
<!-- 自定义颜色 -->
<un-line color="#2979ff"></un-line>
<!-- 自定义线条方向 -->
<un-line direction="col"></un-line>
<!-- 自定义线条长度 -->
<un-line length="50%"></un-line>
</template>
<script setup lang="ts">
// 线条组件的简单使用示例
</script>是否虚线
dashed控制线条是否虚线:
<template>
<un-line dashed></un-line>
</template>
<script setup lang="ts">
// 虚线效果示例
</script>API
Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| color | 线条的颜色 | string | #d6d7d9 |
| length | 长度,竖向时表现为高度,横向时表现为长度,可以为百分比,带单位的值等 | string | number | 100% |
| direction | 线条的方向,row-横向,col-竖向 | Enum | row |
| hairline | 是否显示细线条 | boolean | true |
| margin | 线条与上下左右元素的间距,字符串形式,如"30px"、"20px 30px" | string | number | 0 |
| dashed | 是否虚线,false-实线,true-虚线 | boolean | false |
