【源码】基于JavaScript和Vue的点击约束解决方案

项目简介

本项目聚焦于前端开发中用户多次点击按钮引发多次接口调用的问题。通过重写 XMLHttpRequest 对接口请求进行监听，实现点击约束。当按钮触发点击后，需等待接口调用有结果才能再次触发，避免重复调用接口。该方案包含原生 JS 版和 Vue 自定义指令版，适用于多种前端项目。

项目的主要特性和功能

1. 低成本使用：无需安装 npm 包，仅 180 行代码（含 CSS 样式及 JS），可直接复制粘贴使用。
2. 高兼容性：不依赖第三方库，与技术栈无关，各类前端项目（如 Vue、React、jQuery 项目）均可接入。
3. 易于定制：实现原理简单，代码无加密和混淆，可根据业务需求进行定制化样式调整。
4. loading 遮罩效果：除点击约束外，还能实现内容区的 loading 遮罩效果。
5. 正则匹配功能：支持正则匹配，可进行数值匹配、精准匹配等。
6. 支持传入请求函数：Vue 自定义指令版支持传入类似 axios 的请求配置函数，适合将接口请求配置独立抽离管理的项目。

安装使用步骤

原生 JS 版

1. 在所有 js 库之前引入 dom-loading.js 文件，推荐下载到本地保存。引入该文件是为了监听 XMLHttpRequest。
2. 在目标 DOM 上添加 data-loading 属性，示例如下： ```html

`data-loading` 参数格式： - `get`：表示监听的接口请求类型。 - `loading`：标识点击约束时的 loading 样式，有 `loading`、`waiting`、`disabled` 三种，可不填，默认为 `waiting`。 - `/mock/50/test/users`：标识需要监听的接口名，通过 `url.indexOf(targetUrl)` 进行字符串匹配，支持数字正则匹配。 - 监听多个请求可使用数组形式，如：html

```

Vue 自定义指令版

1. 注册全局自定义指令，将提供的核心代码复制到项目中。
2. 在目标 DOM 上添加 v-waiting 属性，示例如下： ```html

``v-waiting参数格式与data-loading相同，同时还支持传入类似 axios 的请求配置函数，但需注意this被bind` 修改过的函数无法解析。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】