Vue 或者 Js 如何做到像浏览器一样拖拽标签页把标签页变成一个独立窗口并保留标签页原来的数据？

[Nieve]

好像标题造成了误解，我举个例子

<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
</el-tabs>

比如说有 element 的 tabs ，可以把其中的任一 tab 拖拽下来并生成一个可以自由移动的 div,div 里面的内容是之前 tab 面板的内容

[IceBay]

iframe 应该是最简单的。

[codehz]

vanilla 里可以直接用 appendChild 等方式移动元素在 dom 树里的位置
（当然你要原生窗口的话就麻烦了

[cangcang]

生成一个新的独立窗口，把数据传进去，再把标签页销毁。

[liuzhaowei55]

浏览器数据存储 indexeddb 然后新开标签重新把数据加载出来，看 3 楼回答想到的

[Opportunity]

@codehz 其实可以操作原生窗口，就是很难弄对

child = window.open('about:blank')
child.document.body = window.child.document.body

custom elements 的 adoptedCallback 不就是干这个的

[duduaba]

前端就是你永远也想不到客户有什么奇葩的需求。

[Nieve]

@IceBay 已修改描述

[Nieve]

@codehz 已修改描述

[Nieve]

@cangcang 已修改描述

[Nieve]

@liuzhaowei55 已修改描述

[Nieve]

@Opportunity 已修改描述

[cangcang]

试试用动态挂载，给你贴一个 vue 官网的链接： https://v3.cn.vuejs.org/guide/migration/global-api.html#vue-prototype-%E6%9B%BF%E6%8D%A2%E4%B8%BA-config-globalproperties

[hchow]

vue3 Teleport 组件传送门感觉可以做： https://staging-cn.vuejs.org/guide/built-ins/teleport.html