V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Nieve
V2EX  ›  Vue.js

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

  •  
  •   Nieve · 2022-05-10 15:09:29 +08:00 · 2472 次点击
    这是一个创建于 907 天前的主题,其中的信息可能已经有所发展或是发生改变。
    第 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 面板的内容
    13 条回复    2022-05-12 17:10:52 +08:00
    IceBay
        1
    IceBay  
       2022-05-10 15:18:07 +08:00
    iframe 应该是最简单的。
    codehz
        2
    codehz  
       2022-05-10 15:42:09 +08:00
    vanilla 里可以直接用 appendChild 等方式移动元素在 dom 树里的位置
    (当然你要原生窗口的话就麻烦了
    cangcang
        3
    cangcang  
       2022-05-10 19:37:44 +08:00
    生成一个新的独立窗口,把数据传进去,再把标签页销毁。
    liuzhaowei55
        4
    liuzhaowei55  
       2022-05-10 19:51:02 +08:00 via iPhone
    浏览器数据存储 indexeddb 然后新开标签重新把数据加载出来,看 3 楼回答想到的
    Opportunity
        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 不就是干这个的
    duduaba
        6
    duduaba  
       2022-05-11 11:12:14 +08:00
    前端就是你永远也想不到客户有什么奇葩的需求。
    Nieve
        7
    Nieve  
    OP
       2022-05-11 13:49:04 +08:00
    @IceBay 已修改描述
    Nieve
        8
    Nieve  
    OP
       2022-05-11 13:49:11 +08:00
    @codehz 已修改描述
    Nieve
        9
    Nieve  
    OP
       2022-05-11 13:49:16 +08:00
    @cangcang 已修改描述
    Nieve
        10
    Nieve  
    OP
       2022-05-11 13:49:21 +08:00
    @liuzhaowei55 已修改描述
    Nieve
        11
    Nieve  
    OP
       2022-05-11 13:49:31 +08:00
    @Opportunity 已修改描述
    cangcang
        12
    cangcang  
       2022-05-12 11:01:19 +08:00
    hchow
        13
    hchow  
       2022-05-12 17:10:52 +08:00
    vue3 Teleport 组件传送门感觉可以做: https://staging-cn.vuejs.org/guide/built-ins/teleport.html
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2599 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 11:25 · PVG 19:25 · LAX 04:25 · JFK 07:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.