vue3 全局点击事件

在Vue3中，你可以通过全局指令来实现全局的点击事件。全局指令可以在所有的.vue文件中使用。你可以在main.js文件中定义全局指令，或者在一个单独的js文件中定义并在main.js中引入。下面是一个在main.js中定义全局点击事件的例子：

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.directive('onceClick', {
  mounted(el, binding, vnode) {
    el.addEventListener('click', () => {
      if (!el.disabled) {
        el.disabled = true;
        setTimeout(() => {
          el.disabled = false;
        }, binding.value || 1000);
      }
    });
  }
});

app.mount('#app');

在这个例子中，我们通过app.directive方法定义了一个名为onceClick的全局指令。在mounted函数中，我们给元素添加了一个点击事件监听器，当元素被点击时，会执行一段逻辑来禁用按钮一段时间。你可以根据自己的需求来修改这段逻辑。然后，我们通过app.mount方法将应用程序挂载到#app元素上。

这样，你就可以在任何一个.vue文件中使用onceClick指令来实现全局的点击事件了。例如：

<template>
  <div>
    <button v-onceClick="10000" @click="btnClick">Click Me</button>
  </div>
</template>

<script>
export default {
  setup() {
    const btnClick = () => {
      // 点击按钮的逻辑
    }
    return {
      btnClick
    }
  }
}
</script>

在上面的例子中，我们在按钮上使用了onceClick指令，指定了一个延迟时间为10000毫秒。当按钮被点击后，会执行btnClick方法中的逻辑。

希望这个例子能够帮助到你！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [Vue3 自定义指令](https://blog.csdn.net/m0_62758542/article/details/128544406)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]