Line 线条组件

线条组件，用于绘制线条，支持多种配置，包括线条大小、长度、方向、是否为细边框以及边框样式。

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="线条">
		<t-card class="mlrt.30" title="Line 线条" sub-title=" 创建线条，提供丰富的样式和行为配置。通过 type 属性，可设置线条主题。"></t-card>
		<introduction title="基础功能">
			<t-line class='mtb.30' type="success"></t-line>
			<t-line class='mtb.30' type="error"></t-line>
			<t-line class='mtb.30' type="primary"></t-line>
			<t-line class='mtb.30' type="warning"></t-line>
		</introduction>
		<introduction title="纵向">
			<view class="group-item" style="display: flex;flex-direction: row;">
				<t-line direction="col" class='m.30' length="300rpx"></t-line>
				<t-line direction="col" class='m.30' length="300rpx" type="success"></t-line>
				<t-line direction="col" class='m.30' length="300rpx" type="error"></t-line>
				<t-line direction="col" class='m.30' length="300rpx" type="primary"></t-line>
				<t-line direction="col" class='m.30' length="300rpx" type="warning"></t-line>
			</view>
		</introduction>
		<introduction title="虚线">
			<t-line class='mtb.30' lineStyle="dashed"></t-line>
			<t-line class='mtb.30' type="success" lineStyle="dashed"></t-line>
			<t-line class='mtb.30' type="error" lineStyle="dashed"></t-line>
			<t-line class='mtb.30' type="primary" lineStyle="dashed"></t-line>
			<t-line class='mtb.30' type="warning" lineStyle="dashed"></t-line>
		</introduction>
		<introduction title="更细的线条">
			<t-line class='mtb.30' :hairline="true"></t-line>
			<t-line class='mtb.30' type="success" :hairline="true"></t-line>
			<t-line class='mtb.30' type="error" :hairline="true"></t-line>
			<t-line class='mtb.30' type="primary" :hairline="true"></t-line>
			<t-line class='mtb.30' type="warning" :hairline="true"></t-line>
		</introduction>
		<introduction title="设置线条宽度">
			<t-line class='mtb.30' lineSize="10rpx"></t-line>
			<t-line class='mtb.30' lineSize="20rpx" type="success"></t-line>
			<t-line class='mtb.30' lineSize="30rpx" type="error"></t-line>
			<t-line class='mtb.30' lineSize="40rpx" type="primary"></t-line>
			<t-line class='mtb.30' lineSize="50rpx" type="warning"></t-line>
		</introduction>
		<introduction title="自定义颜色">
			<t-line class='mtb.30-bb.red' lineSize="10rpx"></t-line>
		</introduction>
	</t-page>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.group-item {
		padding: 50rpx;
	}
</style>

Props

名称	描述	类型	默认值	可选值
lineSize	线条的粗细	String	'1px'	-
length	线条的长度	String	'auto'	-
direction	线条的方向	String	'row'	'row', 'col'
hairline	是否使用细边框	Boolean	true	-
lineStyle	边框样式	String	'solid'	'solid', 'dashed', 'dotted', 'double'
type	组件场景	String	""	'info', 'primary', 'error', 'warning', 'success'
effect	效果	String	""	'normal', 'dark', 'light', 'plain'

Events

事件名	描述	回调参数	版本
-	-	-	-

Slots

名称	描述
-	-

Methods

方法名	描述	参数
-	-	-