vue2 弹出框注入在指定位置后，在当前组件中可以拖拽，切换tab后不能拖拽？

  • Z时代
  • 2024-02-06
  • 分类：IT

开发需求需要实现弹出框可以拖拽，而且可以在弹出后，切换tab仍然可以正常拖拽。具体结构

<tabs class="tabs">
    <tab>
        // 组件1
        <cop1>
            11
        </cop1>
    </tab>
    <tab>
        // 组件2
        <cop2>
            22
          // 弹出框
          <modal></modal>
        </cop2>
    </tab>
    // 弹出后插入在 tabs 中，实现切换 tab 后弹出框仍然需要存在
</tabs>

大部分效果已实现，弹框组件内部会存在默认插槽

// modal
<div>
    <slot></slot>
</div>

这个插槽的内容会相对复杂。
如果使用 extend 或者 render 全局指定挂载可以实现需求。

import Modal from './modal.vue'
const modal = {
    show(props) {
        const instance = new Vue({
            render(h) {
                return h(Modal, { props })
            }
        }).$mount()
        document.querySelector('.tabs').appendChild(instance.$el);
    }
}
this.$modal.show({
    value: true,
    render: (h) => {
        return h('div', 'slot')
    }
})

这样的弹出框是可以实现需求，但是由于插槽内容复杂，需要用到模版，传入 render 函数不现实。

如果使用 .vue 组件实现，在当前 tab 可以拖动，切换 tab 的后不能拖动了。

// 弹出内容
<modal>
 // 复杂的内容
</modal>

现在就卡在这里，没有思路了。有没有一种方式可以解决呢？

没有人回答吗？提供个思路也可以呀

回答：

首先很感谢大家的解答，这里卡在如果使用.vue的组件模版就没法挂载在任意DOM上可以任意切换拖拽，而使用创建弹框实例，对于复杂插槽不好处理。
这里还是自己想复杂了，对于复杂插槽而言我仍是创建了一个模版组件，传入 render 函数，这样就解决了我的问题了。

// modal
DraggableModal.show = (properties = {}) => {
    const { target = '.flow', render = () => {}, close = () => {}, ...props } = properties;
    const Instance = new Vue({
        render(h) {
            return h(DraggableModal, { props }, [render(h)]);
        },
    }).$mount();
    document.querySelector(target).appendChild(Instance.$el);
    const modal = Instance.$children[0];
    modal.remove = () => {
        close();
        document.querySelector(target).removeChild(Instance.$el);
        Instance.$destroy();
    };
    return modal;
};

创建需要插入的插槽组件

// previewSlot.vue
<div>{{srv}}</div>

使用

// import previewSlot from './previewSlot.vue';
this.$draggableModal.show({
    value: true,
    title: '预览',
    target: '.flow',
    render: h => {
        const { src } = this;
        return h(previewSlot, { props: { src }});
    },
    close: () => { }
});

回答：

你可以建议尝试下面的方法：
确保弹出框组件在切换Tab时不被销毁，可以使用Vue的keep-alive标签。
在弹出框组件内部处理拖拽逻辑，使用Vue的指令（v-draggable）或第三方拖拽库（如vuedraggable）。
在组件切换Tab时，触发拖拽功能重新初始化，以确保在切换Tab后仍能正常拖拽。
尝试调整方案，以解决切换Tab后不能拖动的问题。

以上是 vue2 弹出框注入在指定位置后，在当前组件中可以拖拽，切换tab后不能拖拽？ 的全部内容， 来源链接： utcz.com/p/933900.html

回到顶部