Vue全局指令如何防止按钮重复点击，形成长尾词？

本文共计453个文字，预计阅读时间需要2分钟。

目录+全局指令避免按钮重复点击+1.common.js+2.在需要引入的页面引入（.vue）+阻止重复点击（vue指令实现）+阻止快速点击按钮会多次调用接口+全局指令避免按钮重复点击+1.common.js

目录

• 全局指令防止按钮重复点击
• 1.common.js
• 2.在需要引入的页面引入（**.vue）
• 防重复点击(vue指令实现)
• 阻止快速点击按钮会重复多次调用接口的

全局指令防止按钮重复点击

1.common.js

首先引入Vue

import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventListener('click', () => {       if (!el.disabled) {         el.disabled = true         setTimeout(() => {           el.disabled = false         }, binding.value || 3000)       }       console.log(el.disabled)     })   } });   export {   preventReClick }

2.在需要引入的页面引入（**.vue）

在按钮上添加v-preventReClick

<el-button  size="small" type="primary" @click="handleSave('form')" v-preventReClick>确定</el-button>

从common.js导入指令preventReClick

import preventReClick from '../common' //防多次点击，重复提交

防重复点击(vue指令实现)

阻止快速点击按钮会重复多次调用接口的

定义全局指令

// directive.js export default {   install (Vue) {     // 防重复点击(指令实现)     Vue.directive('repeatClick', {       inserted (el, binding) {         el.addEventListener('click', () => {           if (!el.disabled) {             el.disabled = true             setTimeout(() => {               el.disabled = false             }, binding.value || 1000)           }         })       }     })   } }

在main.js引用

import directive from 'directive.js'; vue.use(directive );

按钮调用直接加v-preventReClick

<el-button v-repeatClick type="prismary" style="width:100%;" @click="handleSubmit"></el-button>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。