Nuxt.js – 在整个项目中使用文档的脚本

Question

对于我的 CSS 框架自定义需求，我正在使用一个脚本来实现 onClick 按钮“脉冲效果”。 目前，我在以 SSR 模式运行的 Nuxt.js 项目的 default.vue 布局的 mounted() 部分运行它。

这是脚本：

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 但它没有用。

请帮忙。

Answer 1

我会创建一个插件来为你做那些你需要的东西 go 到nuxt.config.js

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

现在你 go 到你的插件文件夹并创建 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");
    });
  }
})

之后你的指令是全局的，你可以 go 到你想要的任何按钮并简单地添加v-pulse到它

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

告诉我它是否有效以及您是否收到任何错误。