VUE3.0学习系列随笔（九）：防止按键多次点击多次触发事件

VUE3.0学习系列随笔（九）：防止按键多次点击多次触发事件

按键在点击过程中，如果不加以限制，就会出现多次点击多次生效的情况。本文主要是实现VUE3.0中防止按键多次点击触发事件。演示效果为：

1、定义全局按键限制函数

新建common文件夹和common.js文件存放全局限制函数，函数代码为：

// 防止处理多次点击全局函数
// methods是点击后需要执行的函数， param是函数需要传的参数，可传可不传
function noMulClicks (methods, param) {
     
  const _this = this
  if (_this.noClick) {
     
    // 第一次点击时执行
    _this.noClick = false
    if ((param && param !== '') || param === 0) {
     
      methods(param)
    } else {
     
      methods()
    }
    // 添加按键延时设置
    setTimeout(() => {
     
      _this.noClick = true
    }, 3500)
  }
}
// 导出
export default {
     
  noMulClicks // 禁止多次点击
}

2、配置全局函数

Vue3.0在main.js中引入common.js全局函数，代码为：

import {
      createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
// 配置公共方法
import common from './common/common.js'

const Vue = createApp(App)

Vue.use(ElementPlus)
// 配置全局限制方法
Vue.config.globalProperties.$noMulClicks = common.noMulClicks

Vue.mount('#app')

3、使用全局限制方法

在data()方法中定义全局按键事件变量：

data () {
     
    return {
     
      noClick: true
    }
  }

在按键事件，@click中添加限制函数如下：

<el-button type="primary" @click="$noMulClicks(send)">添加按键限制el-button>

Vue中引入按键限制的全部代码为：

<template>
  <div>
    <el-row>
      <el-button type="primary" @click="$noMulClicks(send)">添加按键限制el-button>
      <el-button type="success" @click="send()">无按键限制el-button>
    el-row>
  div>
template>

<script>
import {
       ElMessage } from 'element-plus'

export default {
      
  name: 'Button',
  data () {
      
    return {
      
      noClick: true
    }
  },
  methods: {
      
    send () {
      
      ElMessage({
      
        showClose: true,
        message: '恭喜你，登录成功',
        type: 'success'
      })
    }
  }
}
script>

本代码做了添加限制的按键事件和未添加限制的按键事件对比。