Question

我有一个现有的代码库。这是一个简单的HTML页面。我正在尝试使用Vue.js来帮助表单。我已经用普通的旧Javascript编写了自己的UI组件，例如工具提示，模态等。当尝试在我的新Vue应用程序中使用它们时，它们似乎无法完全完成。动态内容的所有创建似乎都可以正常工作。但是，关联的鼠标事件似乎不再起作用。

下面是一个示例来帮助阐明我的问题：https://codepen.io/somecallmejosh/pen/JmdVYy

这是我的工具提示代码：

<div class="sub-main">
<button class="button-two"><span>Hover Me</span></button>
</div>

}）（）

通常，我将使用以下HTML来创建工具提示标记（在此页面的下一页），并附加/删除一个类以隐藏和显示新创建的标记。

;(function () {
const calculatetoolTipPosition = (trigger, toolTip) => {
    const triggerRect = trigger.getBoundingClientRect();
    const toolTipRect = toolTip.getBoundingClientRect();
    const placement = toolTip.dataset.placement;
    // spacing between popover and trigger
    const space = 20;

    // reposition tooltip based on preferred location
    if (placement === 'top') {
      return {
        left: (triggerRect.left + triggerRect.right) / 2 - toolTipRect.width / 2,
        top: triggerRect.top - toolTipRect.height - space
      }
    }

    if (placement === 'bottom') {
      return {
        left: (triggerRect.left + triggerRect.right) / 2 - toolTipRect.width / 2,
        top: triggerRect.bottom + space
      }
    }

    if (placement === 'right') {
      return {
        left: triggerRect.right + space,
        top: (triggerRect.top + triggerRect.bottom) / 2 - toolTipRect.height / 2
      }
    }

    if (placement === 'left') {
      return {
        left: triggerRect.left - toolTipRect.width - space,
        top: (triggerRect.top + triggerRect.bottom) / 2 - toolTipRect.height / 2
      }
    }
  }

  const gettoolTip = trigger => {
    const target = trigger.dataset.target
    return target
      ? document.querySelector(`#${target}`)
      : makeTooltip(trigger);
  }

  const makeTooltip = trigger => {
    const { content, placement } = trigger.dataset;
    // Consider using a template literal in the future.
    // for now, ship it!
    const toolTip = document.createElement('div');
    toolTip.classList.add('tooltip');
    toolTip.dataset.placement = placement;
    toolTip.innerHTML = `${content}`;

    document.body.appendChild(toolTip);
    return toolTip;
  }

  const triggers = document.querySelectorAll('.trigger');

  triggers.forEach(trigger => {
    const toolTip = gettoolTip(trigger);
    const toolTipPos = calculatetoolTipPosition(trigger, toolTip);
    // Apply inline styling
    toolTip.style.left = `${toolTipPos.left}px`;
    toolTip.style.top = `${toolTipPos.top}px`;

    trigger.addEventListener('mouseenter', e => {
      toolTip.classList.toggle('is-active');
    })
    trigger.addEventListener('mouseleave', e => {
        toolTip.classList.toggle('is-active');
      })
  })

上面的JS根据按钮动态创建以下HTML：

<button class="trigger" data-placement="top" data-content="Watch out for that first step, it' s a doozie! -- Ned Ryerson">ToolTip</button>

即使在Vue应用程序中也可以按预期创建工具提示。当我将鼠标悬停在按钮上时，通常将一类is-active应用于动态创建的工具提示内容。但是，当工具提示触发器实时存在于Vue应用程序中时，将不再触发mousoever事件。

谁能帮助我了解为什么这在Vue应用程序中不起作用？同样，任何解决此问题的建议将不胜感激。谢谢。

需要在Vue App中使用预先存在的JS和CSS组件

0 个答案: