vue 封装流动的线组件(支持实线, 虚线, 变色, 流动)

vue 封装流动的线组件(支持实线, 虚线, 变色, 流动)

<template>
	<div
		class="lineBody"
		:class="{ lineBodyRed: isRed }"
		:style="{ position: 'absolute', left: left + 'px', top: top + 'px', width: width + 'px', transform: `rotate(${angle}deg)` }"
	>
		<!-- 实线 正常 -->
		<div v-if="!isDash && !isFlow && !isRed" class="noFlowBody"></div>
		<!-- 实线 红色 -->
		<div v-if="!isDash && !isFlow && isRed" class="noFlowBodyRed"></div>

		<!-- 虚线 流动 正常 -->
		<div v-if="isFlow && !isRed" class="dashFlowLine"></div>
		<!-- 虚线 流动 红色 -->
		<div v-if="isFlow && isRed" class="dashFlowLineRed"></div>
		<!-- 虚线 不流动 正常 -->
		<div v-if="!isFlow && !isRed" class="dashNoflowLine"></div>
		<!-- 虚线 不流动 红色 -->
		<div v-if="!isFlow && isRed" class="dashNoflowLineRed"></div>
	</div>
</template>

<script>
export default {
	props: {
		left: {
			type: [Number, String],
			default: 0,
		},
		top: {
			type: [Number, String],
			default: 0,
		},
		width: {
			type: [Number, String],
			default: 0,
		},
		// 旋转角度
		angle: {
			type: [Number, String],
			default: 0,
		},
        // 是否为红色
		isRed: {
			type: Boolean,
			default: false,
		},
		// 是否流动
		isFlow: {
			type: Boolean,
			default: false,
		},
		// 是否为虚线
		isDash: {
			type: Boolean,
			default: true,
		},
	},

	data() {
		return {};
	},
};
</script>

<style lang="less" scoped>
.lineBody {
	position: absolute;
	margin: 0;
	padding: 0;
	height: 2px;
	overflow: hidden;
}

.lineBody:hover {
	background: #00dcf3;
}

.lineBodyRed:hover {
	background: #ff0000 !important;
}

.noFlowBody {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #00dcf3;
}
.noFlowBodyRed {
	height: 100%;
	width: 100%;
	overflow: hidden;
	background: #ff0000;
}

.dashFlowLine {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, transparent, transparent 3px, #00dcf3 3px, #00dcf3 6px);
	animation: leftToRight 1s infinite linear;
	overflow: hidden;
}
.dashFlowLineRed {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, transparent, transparent 3px, #ff0000 3px, #ff0000 6px);
	animation: leftToRight 1s infinite linear;
	overflow: hidden;
}

.dashNoflowLine {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, transparent, transparent 3px, #00dcf3 3px, #00dcf3 6px);
	overflow: hidden;
}
.dashNoflowLineRed {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, transparent, transparent 3px, #ff0000 3px, #ff0000 6px);
	overflow: hidden;
}

// 从右到左
@keyframes rightToLeft {
	0% {
		background-position: -1px -1px;
	}
	100% {
		background-position: -12px -12px;
	}
}
// 从左到右
@keyframes leftToRight {
	0% {
		background-position: -12px -12px;
	}
	100% {
		background-position: -1px -1px;
	}
}
</style>