如何使用CSS创建连接换行的条件响应式箭头，适配Vue+Tailwind项目？

伪元素完全可以实现该需求，结合换行状态检测即可完成，不需要额外插入动态DOM，和Tailwind的适配性也很高，整体实现分为三步：

1. 换行状态检测 #

首先需要判断当前拖拽列表是否触发了换行，给父容器挂载状态类用于切换箭头样式：

• 监听列表数据变化、容器尺寸变化事件，在事件回调中拿到所有拖拽项的DOM节点
• 对比所有拖拽项的offsetTop，只要存在节点的offsetTop大于第一个节点的offsetTop，即判定为触发换行，给父容器添加has-wrap自定义类，否则移除该类

示例逻辑代码：

<script setup>
import { ref, watch, nextTick, onMounted } from 'vue'
import VueDraggableNext from 'vue-draggable-next'

const list = ref([/* 你的拖拽列表数据 */])
const isWrap = ref(false)
const draggableContainer = ref()

const checkWrap = async () => {
  await nextTick()
  const items = draggableContainer.value?.querySelectorAll('.draggable-item')
  if (!items || items.length <= 1) {
    isWrap.value = false
    return
  }
  const firstItemTop = items[0].offsetTop
  isWrap.value = Array.from(items).some(item => item.offsetTop > firstItemTop)
}

// 列表更新、容器尺寸变化时重新检测
watch(list, checkWrap, { deep: true })
onMounted(checkWrap)
window.addEventListener('resize', checkWrap)
</script>

2. 箭头样式实现 #

有两种实现方式可选，均可以和Tailwind结合使用：

方式一：伪元素拼接 #

用两个伪元素分别实现折线和箭头头部，通过has-wrap类切换位置：

<template>
  <div 
    ref="draggableContainer" 
    class="relative" 
    :class="{ 'has-wrap': isWrap }"
  >
    <VueDraggableNext v-model="list" item-key="id">
      <template #item="{ element }">
        <div class="draggable-item w-[120px] h-10 mr-2 mb-2 bg-gray-100 rounded flex items-center justify-center">
          {{ element.name }}
        </div>
      </template>
    </VueDraggableNext>
  </div>
</template>

<style scoped>
@layer components {
  /* 共用样式 */
  .relative::before, .relative::after {
    content: '';
    position: absolute;
    @apply transition-all duration-200;
  }
  /* 水平横线 */
  .relative::before {
    @apply bg-blue-500;
    height: 2px;
    left: 0;
    top: 39px; /* 对应拖拽项高度40px，可自行调整 */
  }
  /* 箭头头部 */
  .relative::after {
    @apply border-l-[6px] border-l-blue-500 border-y-[4px] border-y-transparent border-r-0;
    width: 0;
    height: 0;
    top: 36px; /* 和横线垂直居中对齐，可自行调整 */
  }

  /* 单行状态：箭头横向延伸 */
  .relative::before {
    width: 100%;
  }
  .relative::after {
    left: 100%;
  }

  /* 换行状态：箭头指向第二行开头 */
  .relative.has-wrap::before {
    /* 122px为单个拖拽项宽度+右边距，可替换为动态计算的CSS变量 */
    width: calc(100% - 122px);
  }
  .relative.has-wrap::after {
    left: calc(100% - 122px);
    /* 调整Y轴位置到第二行高度，可自行调整 */
    top: calc(39px + 16px);
  }
}
</style>

方式二：SVG背景（更推荐复杂箭头样式） #

如果需要实现Z型折线箭头，直接把箭头SVG转成data URI作为伪元素的背景图，不同状态下切换背景路径或尺寸即可，不需要拼接多个伪元素，适配性更高。你可以提前做好单行、换行两种状态的SVG路径，或者把路径参数存在CSS变量里动态切换。

3. 动态宽度适配 #

如果你的拖拽项宽度不固定，可以在检测换行的同时，拿到第一行最后一个元素的右边缘坐标，存到CSS变量里，比如--line-end: 800px，样式里直接用var(--line-end)替换写死的宽度数值即可适配任意宽度的拖拽项。

内容的提问来源于stack exchange，提问作者LovelyAndy