vue2实现跨容器组件

这是一个有两个插槽的组件，页面布局要将source和target放在不同的div中，所以使用portal-vue来帮助渲染。

<template>
  <div class="drag-clone-container">
    <!-- 源容器 -->
    <slot name="source"></slot>

    <!-- 目标容器通过Portal渲染到任意位置 -->
    <portal to="target-portal">
        <slot name="target"></slot>
    </portal>
  </div>
</template>

使用：

<div>
	<drag-clone-container>
		<!-- 自定义源元素 -->
		<template #source="{}">
			<div>元素内容</div>
		</template>
		
		<!-- 自定义目标元素 -->
		<template #target="{}">
			<div>元素内容</div>
		</template>
	</drag-clone-container>
</div>
<div>
	<!-- 目标容器渲染到此处 -->
	<portal-target name="target-portal"></portal-target>
</div>

要安装适合vue2的版本

npm install portal-vue@^2.1.7

页面引用

import {Portal} from "portal-vue";
import {PortalTarget} from "portal-vue";