博客
关于我
Vue 前端框架中限制用户短时间内多次点击同一按钮的方法(例如:登录、注册)
阅读量:432 次
发布时间:2019-03-06

本文共 587 字,大约阅读时间需要 1 分钟。

一、首先在项目目录(自定义)下创建'controlClickState.js'文件,后在文件中定义如下内容:
// controlClickState.js 文件export default {  install(Vue) {    // 禁止短时间内重复点击    Vue.directive('preventClick', {      inserted(button, bind) {        button.addEventListener('click', () => {          if (!button.disabled) {            button.disabled = true;            setTimeout(() => {              but.disabled = false            }, 6000)          }        })      }    })  }}
二、在项目目录下的 main.js 入口文件引用定义好的 'controlClickState.js'文件
import preventClick from '../static/js/controlClickState'Vue.use(preventClick)
三、在需要限制点击频率的组件中使用

转载地址:http://iknuz.baihongyu.com/

你可能感兴趣的文章
Node+Express连接mysql实现增删改查
查看>>
node, nvm, npm,pnpm,以前简单的前端环境为什么越来越复杂
查看>>
Node-RED中Button按钮组件和TextInput文字输入组件的使用
查看>>
vue3+Ts 项目打包时报错 ‘reactive‘is declared but its value is never read.及解决方法
查看>>
Node-RED中Switch开关和Dropdown选择组件的使用
查看>>
Node-RED中使用exec节点实现调用外部exe程序
查看>>
Node-RED中使用function函式节点实现数值计算(相加计算)
查看>>
Node-RED中使用html节点爬取HTML网页资料之爬取Node-RED的最新版本
查看>>
Node-RED中使用JSON数据建立web网站
查看>>
Node-RED中使用json节点解析JSON数据
查看>>
Node-RED中使用node-random节点来实现随机数在折线图中显示
查看>>
Node-RED中使用node-red-browser-utils节点实现选择Windows操作系统中的文件并实现图片预览
查看>>
Node-RED中使用node-red-contrib-image-output节点实现图片预览
查看>>
Node-RED中使用node-red-node-ui-iframe节点实现内嵌iframe访问其他网站的效果
查看>>
Node-RED中使用Notification元件显示警告讯息框(温度过高提示)
查看>>
Node-RED中使用range范围节点实现从一个范围对应至另一个范围
查看>>
Node-RED中实现HTML表单提交和获取提交的内容
查看>>
Node-RED中将CSV数据写入txt文件并从文件中读取解析数据
查看>>
Node-RED中建立TCP服务端和客户端
查看>>
Node-RED中建立Websocket客户端连接
查看>>