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

小灰灰 2022-11-19 07:41 1238阅读 0赞

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

按键在点击过程中，如果不加以限制，就会出现多次点击多次生效的情况。本文主要是实现VUE3.0中防止按键多次点击触发事件。演示效果为：  
![在这里插入图片描述][20210127151606405.gif]

#### 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>

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

[20210127151606405.gif]: /images/20221119/20273cc120064c68b63c0dee0b33d8e8.png