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

原创

于 2025-03-05 11:14:52 发布 · 943 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

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"