Необходимо использовать уже существующие компоненты JS и CSS в приложении Vue - PullRequest
Новая
       15

Необходимо использовать уже существующие компоненты JS и CSS в приложении Vue

0 голосов
/ 01 октября 2018

У меня есть существующая кодовая база.Это простая HTML-страница.Я пытаюсь использовать Vue.js, чтобы помочь с формой.Я уже написал свои собственные компоненты пользовательского интерфейса, такие как всплывающие подсказки, модалы и т. Д. В простом старом Javascript.Похоже, они не полностью работают, когда пытаются использовать их внутри моего нового приложения Vue.Все создание динамического контента, кажется, работает просто отлично.Тем не менее, связанные события мыши больше не работают.

Вот пример, чтобы помочь прояснить мой вопрос: https://codepen.io/somecallmejosh/pen/JmdVYy

Вот мой код подсказки: 

;(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');
      })
  })

}) ()

Обычно,Я использовал бы следующий HTML-код для создания разметки всплывающей подсказки (далее по этой странице) и для добавления / удаления класса, чтобы скрыть и показать вновь созданную разметку. 

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

JS выше динамически создает следующий HTML-кодна основе кнопки: 

<div class="tooltip" data-placement="top" style="left: 364.688px; top: 266.422px;">Watch out for that first step, it's a doozie! -- Ned Ryerson</div>

Подсказки создаются, как и ожидалось, даже из приложения Vue.При наведении курсора на кнопку класс is-active обычно применяется к динамически создаваемому содержимому всплывающей подсказки.Однако событие mousoever больше не срабатывает, когда триггеры всплывающей подсказки находятся в приложении Vue.

Может кто-нибудь помочь мне понять, почему это не работает внутри приложения Vue?Кроме того, любые рекомендации для исправления этого будут с благодарностью.Спасибо.

...