vue防止频繁点击

忘是亡心i 2021-09-08 17:40 503阅读 0赞

**preventReClick.js**

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 || 1000)  
            \}  
        \})  
    \}  
\});

export default \{ preventReClick \}

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

**main.js**

import Vue from "vue";  
import App from "./App.vue";  
import router from "./router";  
import store from "./store";  
// import Mint from "mint-ui";  
// import "mint-ui/lib/style.css";  
// Vue.use(Mint);  
import Vant from "vant";  
import "vant/lib/index.css";  
Vue.use(Vant);  
import \{ Toast \} from "vant";  
Vue.prototype.$Toast = Toast;  
Vue.config.productionTip = false;

//验证是否登录  
import './utils/permission.js';  
//防多次点击，重复提交  
import preventReClick from './utils/preventReClick.js';

new Vue(\{  
  router,  
  store,  
    preventReClick,  
  render: h => h(App)  
\}).$mount("\#app");

\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*

**vue文件中使用**

<template>  
    <div class="main-para">  
        <van-nav-bar title="订单" class="public-title" left-arrow @click-left="onClickLeft" />  
        <div class="main">  
            <button type="button" name="" @click="onClickSearch"  v-preventReClick>搜索</button>  
        </div>  
    </div>  
</template>

发表评论取消回复

表情：

评论列表（有 0 条评论，503人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 中防止用户频繁点击按钮的优秀实践

系列文章目录 -------------------- 文章目录系列文章目录前言一、为什么要防止用户频繁点击按钮？二、优秀的防止用

水深无声/ 2023年10月12日 18:17/ 0 赞/ 5 阅读

相关 Android 防止快速点击

import android.app.Activity; import android.os.SystemClock; import android.v

电玩女神/ 2023年10月10日 22:19/ 0 赞/ 28 阅读

相关 Vue 防止用户短时间内频繁多次点击

功能描述:禁止用户在一定的时间多次点击，在一定时间内将按钮禁用，用定时器实现，一定时间之后用户可再次点击. 功能实现：使用Vue.directive实现，全局注册，方便其他主

灰太狼/ 2023年10月10日 11:54/ 0 赞/ 41 阅读

相关 vue自定义指令防止重复点击

PS：参考这篇博客的方法：[原博][Link 1]，亲测有效！！ 1、创建preventReClick.js文件 import Vue from 'vue'

比眉伴天荒/ 2023年01月20日 13:48/ 0 赞/ 244 阅读

相关 vue防止多次点击（暴力点击）

工具类noDbClick.js export default { }.install = (Vue, options = { }) => { V

╰+哭是因爲堅強的太久メ/ 2022年12月26日 10:11/ 0 赞/ 263 阅读

相关 Android防止多次点击

一、利用系统时间差 / 最后一次点击时间map / private static Map<String, Long> lastClickTimeMap;

待我称王封你为后i/ 2022年11月19日 01:07/ 0 赞/ 221 阅读

相关 js控制按钮，防止频繁点击响应

为了防止频繁点击按钮，可以采用一个策略，点击一次后让按钮灰掉，暂时不可以用，一段时间后再可以用，伪代码如下： var clicktag = 0;

本是古典何须时尚/ 2022年08月06日 13:21/ 0 赞/ 186 阅读

相关小程序防止重复点击

util.js ![ContractedBlock.gif][] ![ExpandedBlockStart.gif][] // 防抖节流防止重复点击 fu

落日映苍穹つ/ 2021年11月27日 04:58/ 0 赞/ 386 阅读

相关 ReactNative防止重复点击工具类

可将此代码放入到有个工具类，js文件中 / Created by wayne on 2017/6/7. 防止重复点击工具类，目前时间定为3秒

﹏ヽ暗。殇╰゛Y/ 2021年09月20日 00:34/ 0 赞/ 481 阅读

相关 vue防止频繁点击

preventReClick.js import Vue from 'vue' const preventReClick = Vue.directive('preventR

忘是亡心i/ 2021年09月08日 17:40/ 0 赞/ 504 阅读