Question

我正在尝试创建一个自定义Vue工具提示指令，该指令创建一个组件并将其渲染/挂载到应用程序的根元素。

目前，tooltip组件正在mouseenter上加载，但不会在mouseleave上销毁它。

稍后，我将获得指令绑定到它的元素ClientRect，并应用样式来定位工具提示。

这是我的指令代码：

import Vue from 'Vue';
import tooltip from '../../views/components/tooltip/tooltip.vue';

export default {
    bind() {},
    inserted(el) {
        let component;
        el.addEventListener('mouseenter', () => {
            const Tooltip = Vue.extend(tooltip);
            component = new Tooltip().$mount();
            document.getElementById('app').appendChild(component.$el);
        });
        el.addEventListener('mouseleave', () => {
            component.$destroy();
        });
    },
    update() {},
    componentUpdated() {},
    unbind() {},
};

如何正确销毁mouseleave上的组件？

Answer 1

在inserted挂钩中创建对组件的引用，并在需要销毁它时调用$destroy。由于您手动安装组件，因此您还需要手动删除HTML元素：

inserted(el) {
  let component;
  el.addEventListener('mouseenter', () => {
    let Tooltip = Vue.extend(tooltip);
    component = new ToolTip().$mount();
    document.getElementById('app').appendChild(component.$el);
  });
  el.addEventListener('mouseleave', () => {
    document.getElementById('app').removeChild(component.$el);
    component.$destroy();
  });
},

Here's a working fiddle.

Vue如何将已创建和已安装的工具提示组件销毁到#app

1 个答案: