销毁父组件时，UIkit 模态元素不会从 DOM 中删除（Vue.js）

Posted 2023-02-23

【中文标题】销毁父组件时，UIkit 模态元素不会从 DOM 中删除（Vue.js）

【英文标题】：UIkit modal element is not removed from DOM when parent component is destroyed (Vue.js)

【发布时间】：2020-07-07 08:44:35

【问题描述】：

我在我的 Vue 应用程序上使用 UIKit 模式。

UIkit.modal(element).show(); // adds class uk-open and style="display:block"
UIkit.modal(element).hide(); 

Hide 只是删除类 uk-open 和 style="display:block"。我注意到，即使 modal 的父组件被销毁后，modal 元素仍保留在 DOM 上。我还注意到，在 show 上，元素模式移动到 body 的最底部，就在 end body 标记之前。首次加载时，它将位于组件内声明的位置。 （这可能是它没有被看到并因此没有被删除的原因吗？）当我移动到不同的组件并返回以打开具有模态的组件作为子组件并再次触发显示时会出现问题。 DOM 上的模态元素堆积起来并没有被移除。

我尝试过的一种解决方法是，我添加了一个条件，而不是触发显示的按钮，如果返回 true，则元素将添加到 DOM 并触发显示。

    <field-form-modal
        v-if="showModal"
        .....
    />

    watch: 
    showModal(show) 
        if (show) 
            UIkit.modal('#field-form-modal').show();
        
    
,

但是，当我到达这一行时： UIkit.modal('#form-field-modal').show(); 。该元素尚未在 DOM 上。因此，我收到此错误：无法读取未定义的属性“显示”。如果我的假设是正确的，我认为它只会在 showModal 监视功能之后添加。

关于如何解决此问题的任何建议？谢谢！

【问题讨论】：

我现在也遇到了这个问题。你有这个问题的更新吗？？

@AbingPj 刚刚发布了一个新答案

【参考方案1】：

父组件id应该设置为modal中的容器

// Parent component
<div id="parent-component">
    
  <sample-modal/>
</div>


// Modal component
<div
    id="sample-modal"
    class="uk-modal"
    container="#parent-component"
>
     // contents
</div>


    

【参考方案2】：

我继续解决方法并使用$nextTick 确保在调用 show 函数之前模态元素已经在 DOM 中。

watch: 
    showModal: 
        handler: function(show) 
            this.$nextTick(() => 
                if (show) 
                    UIkit.modal('#field-form-modal').show();
                
            );
        ,
        deep: true