Vue 或者 Js 如何做到像浏览器一样拖拽标签页把标签页变成一个独立窗口并保留标签页原来的数据？
Nieve · 2022-05-10 15:09:29 +08:00 · 2517 次点击这是一个创建于 926 天前的主题，其中的信息可能已经有所发展或是发生改变。
第 1 条附言 · 2022-05-11 13:48:47 +08:00
好像标题造成了误解，我举个例子
<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 面板的内容
<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 面板的内容
 |
1
IceBay 2022-05-10 15:18:07 +08:00
iframe 应该是最简单的。
|
 |
2
codehz 2022-05-10 15:42:09 +08:00
vanilla 里可以直接用 appendChild 等方式移动元素在 dom 树里的位置
（当然你要原生窗口的话就麻烦了 |
 |
3
cangcang 2022-05-10 19:37:44 +08:00
生成一个新的独立窗口，把数据传进去，再把标签页销毁。
|
 |
4
liuzhaowei55 2022-05-10 19:51:02 +08:00 via iPhone
浏览器数据存储 indexeddb 然后新开标签重新把数据加载出来，看 3 楼回答想到的
|
 |
5
Opportunity 2022-05-10 22:23:26 +08:00
@codehz 其实可以操作原生窗口，就是很难弄对
child = window.open('about:blank') child.document.body = window.child.document.body custom elements 的 adoptedCallback 不就是干这个的 |
 |
6
duduaba 2022-05-11 11:12:14 +08:00
前端就是你永远也想不到客户有什么奇葩的需求。
|
 |
10
Nieve OP @liuzhaowei55 已修改描述
|
|
11
Nieve OP @Opportunity 已修改描述
|
|
12
cangcang 2022-05-12 11:01:19 +08:00
|
 |
13
hchow 2022-05-12 17:10:52 +08:00
vue3 Teleport 组件传送门感觉可以做： https://staging-cn.vuejs.org/guide/built-ins/teleport.html
|
Select Language