V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Sponsored by
LinkedIn
不坐班的神仙工作 · 去任何你想去的地方远程,赚一线城市的工资
2000 个不用出门 Social 的全球远程工作,帮助 V2EX 的小伙伴开启全新的工作方式。
Promoted by LinkedIn
Nieve
V2EX  ›  Vue.js

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

  •  
  •   Nieve · 142 天前 · 1717 次点击
    这是一个创建于 142 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 1 条附言  ·  141 天前
    好像标题造成了误解,我举个例子

    <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 面板的内容
    13 条回复    2022-05-12 17:10:52 +08:00
    IceBay
        1
    IceBay  
       142 天前
    iframe 应该是最简单的。
    codehz
        2
    codehz  
       142 天前
    vanilla 里可以直接用 appendChild 等方式移动元素在 dom 树里的位置
    (当然你要原生窗口的话就麻烦了
    cangcang
        3
    cangcang  
       142 天前
    生成一个新的独立窗口,把数据传进去,再把标签页销毁。
    liuzhaowei55
        4
    liuzhaowei55  
       142 天前 via iPhone
    浏览器数据存储 indexeddb 然后新开标签重新把数据加载出来,看 3 楼回答想到的
    Opportunity
        5
    Opportunity  
       142 天前
    @codehz 其实可以操作原生窗口,就是很难弄对

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

    custom elements 的 adoptedCallback 不就是干这个的
    duduaba
        6
    duduaba  
       141 天前
    前端就是你永远也想不到客户有什么奇葩的需求。
    Nieve
        7
    Nieve  
    OP
       141 天前
    @IceBay 已修改描述
    Nieve
        8
    Nieve  
    OP
       141 天前
    @codehz 已修改描述
    Nieve
        9
    Nieve  
    OP
       141 天前
    @cangcang 已修改描述
    Nieve
        10
    Nieve  
    OP
       141 天前
    @liuzhaowei55 已修改描述
    Nieve
        11
    Nieve  
    OP
       141 天前
    @Opportunity 已修改描述
    cangcang
        12
    cangcang  
       140 天前
    hchow
        13
    hchow  
       140 天前
    vue3 Teleport 组件传送门感觉可以做: https://staging-cn.vuejs.org/guide/built-ins/teleport.html
    关于   ·   帮助文档   ·   API   ·   FAQ   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   1083 人在线   最高记录 5497   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 44ms · UTC 20:45 · PVG 04:45 · LAX 13:45 · JFK 16:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.