вызываемая функция доступна глобально в приложении vue

Question

У меня есть эта функция, связанная с плагином анимации css под названием animatecss

function animateCss(element, animationName, callback) {
  const node = document.querySelector(element)
  node.classList.add('animated', animationName)

  function handleAnimationEnd() {
      node.classList.remove('animated', animationName)
      node.removeEventListener('animationend', handleAnimationEnd)

      if (typeof callback === 'function') callback()
  }

  node.addEventListener('animationend', handleAnimationEnd);
}

. Есть ли способ сделать ее действительной вызываемой функцией vue, которая полностью доступна для моего приложения vue,Я использую его для вызова, например,

animateCss('#el', 'fadeInDown', function(){
    console.log('animation completed');
});

. Я могу сделать это window.animateCss, чтобы объявить его как глобальную переменную, но мне это не кажется правильным.Есть идеи, помогите пожалуйста?

Answer 1

Если вы установите

Vue.prototype.$animateCss = function(element, animationName, callback) {
  const node = document.querySelector(element)
  node.classList.add('animated', animationName)

  function handleAnimationEnd() {
      node.classList.remove('animated', animationName)
      node.removeEventListener('animationend', handleAnimationEnd)

      if (typeof callback === 'function') callback()
  }

  node.addEventListener('animationend', handleAnimationEnd);
}

перед созданием приложения, вы сможете использовать this.$animateCss во всех ваших компонентах.

Возможно, вы также захотите прочитать о (Global) Mixins , которые предоставляют эту функциональность более гибким способом.