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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

› Vue.js

This topic created in 1462 days ago, the information mentioned may be changed or developed.

Supplement 1 · May 11, 2022

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

<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 面板的内容

标签

Vue

拖拽

浏览器

13 replies • 2022-05-12 17:10:52 +08:00

icebay

May 10, 2022

iframe 应该是最简单的。

codehz

May 10, 2022

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

cangcang

May 10, 2022

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

liuzhaowei55

May 10, 2022 via iPhone

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

Opportunity

May 10, 2022

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

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

custom elements 的 adoptedCallback 不就是干这个的