zoukankan      html  css  js  c++  java
  • Uniapp点击按钮防抖操作

    一、在根目录下新建common文件并创建common.js文件,输入下面代码
     1 // 防止处理多次点击
     2 function noMultipleClicks(methods, info) {
     3     // methods是需要点击后需要执行的函数, info是点击需要传的参数
     4     let that = this;
     5     if (that.noClick) {
     6         // 第一次点击
     7         that.noClick= false;
     8         if(info && info !== '') {
     9             // info是执行函数需要传的参数
    10             methods(info);
    11         } else {
    12             methods();
    13         }
    14         setTimeout(()=> {
    15             that.noClick= true;
    16         }, 2000)
    17     } else {
    18         // 这里是重复点击的判断
    19     }
    20 }
    21 //导出
    22 export default {
    23     noMultipleClicks,//禁止多次点击
    24 }

    二、man.js文件引入

    1 //配置公共方法
    2 import common from './common/common.js'
    3 Vue.prototype.$noMultipleClicks = common.noMultipleClicks;

    三、在实际页面中引用,不带参数,直接传一个方法就行

     1 //记得在data中挂载   noClick:true
     2 data() {
     3     return {
     4         noClick:true,
     5     }
     6 },
     7 
     8 <view class="bottom-btn-box">
     9     <view class="submit-btn" @click="$noMultipleClicks(commitWork)">提交</view>
    10 </view>
    11 
    12 methods:{
    13     commitWork(){
    14         //balabala
    15     }           
    16 }

    四、在实际页面中引用,带参数,传一个方法和一个参数就行

     1 //记得在data中挂载   noClick:true
     2 data() {
     3     return {
     4         noClick:true,
     5     }
     6 },
     7 <view class="bottom-btn-box">
     8   <view class="pay" @click.stop="$noMultipleClicks(goPay, item)" >支付</view>
     9 </view>
    10 
    11 methods:{
    12     goPay(item){
    13         //balabala
    14     }           
    15 }
  • 相关阅读:
    小程序开发过程中遇到的问题
    Windows 常用命令与快捷键
    前端开发中遇到的问题记录
    判断当前页面是否在微信中
    js学习导图
    一篇不错的 文章
    flex 布局
    微信客户端sdk使用前的 授权签名
    elementUI+vue-cli el-table=》excel
    rem适配
  • 原文地址:https://www.cnblogs.com/ly1368489670/p/14293963.html
Copyright © 2011-2022 走看看