Блог

для моих потребностей в настройке CSS-фреймворка я использую скрипт для кнопки onClick «эффект импульса». В настоящее время я запускаю его в mounted() части моего макета default.vue в Nuxt.js проект работает в режиме SSR.

Это сценарий:

 if (process.client) {
  var elements = document.querySelectorAll(".button");
  for (var i = 0; i < elements.length; i  ) {
    elements[i].addEventListener("click", function (event) {
      event.preventDefault;
      this.classList.remove("pulse");
      void this.offsetWidth;
      this.classList.add("pulse");
    });
  }
}
  

Это простой скрипт, и он работает хорошо, но только при перезагрузке и только для некоторых кнопок, которые находятся в верхней части DOM моей страницы.

Когда я копирую и вставляю этот скрипт в часть сценария компонента, он хорошо работает в компоненте. Но я не хочу включать его в каждый компонент.

Где в моем проекте я должен добавить его, чтобы он работал во всех компонентах? Я пытался добавить его в nuxt-config, но это не сработало.

Пожалуйста, помогите.

Я бы создал плагин, который бы делал это за вас, к которому вам нужно перейти nuxt.config.js

 plugins: ['~/plugins/pulse.js']
  

Теперь вы переходите в свою папку плагинов и создаете это pulse.js и запишите в

 import Vue from 'vue'

Vue.directive('pulse', {
  inserted: (el) => {
    el.addEventListener("click", function (event) {
      event.preventDefault;
      el.classList.remove("pulse");
      void el.offsetWidth;
      el.classList.add("pulse");
    });
  }
})
  

После этого ваша директива становится глобальной, и вы можете перейти к любой кнопке, которую хотите, и просто добавить v-pulse к ней

 <button v-pulse>Click me</button>
  

Скажите мне, работает ли это и если вы получаете какие-либо ошибки.