[uni-app] 防重复点击处理 - 自定义指令

news/2024/12/22 19:01:10/

一般用节流防抖的方式处理,
这里通过vue的自定义指令方式也可以

实现:

import Vue from 'vue'
// 自定义指令防止按钮重复点击 v-debounceconst debounce = {install(Vue) {// 防止重复点击Vue.directive('debounce', {inserted: function(el, binding) {el.addEventListener('click', () => {if (el.style['pointer-events'] != 'none') {el.style['pointer-events'] = 'none';setTimeout(() => {el.style['pointer-events'] = 'all';}, binding.value || 1500)}})}})}
}const tool = {debounce,
}
export default tool;

main.js中使用一下

import tool from "@/common/js/tool.js"
Vue.use(tool.debounce)

应用:

		<view class="debounce-view" @click="debounceClick(3)" v-debounce>防重复点击</view>

http://www.ppmy.cn/news/1197674.html

相关文章

物理内存的关系及分配模式

在分配缓存块的时候&#xff0c;要分两种路径&#xff0c;fast path 和 slow path&#xff0c;也就是快速通道和普通通道。其中 kmem_cache_cpu 就是快速通道&#xff0c;kmem_cache_node 是普通通道。每次分配的时候&#xff0c;要先从 kmem_cache_cpu 进行分配。如果 kmem_ca…

Linux文件权限详解

Linux是一款功能强大的操作系统&#xff0c;其文件权限系统是确保文件和系统安全的关键组成部分。正确理解和配置文件权限对于维护系统安全至关重要。初次接触Linux时&#xff0c;在公司服务器上处理文件夹或文件时常常碰到Permission denied的提示。为了解决问题&#xff0c;我…

【漏洞复现】Metinfo5.0.4任意文件包含漏洞复现

感谢互联网提供分享知识与智慧&#xff0c;在法治的社会里&#xff0c;请遵守有关法律法规 文章目录 1、蚁剑直接连接图片马2、读取敏感目录3、读取php源码4、执行PHP命令5、包含木马写Shell &#xff08;图片马制作新方法&#xff09; 以 metinfo_5.0.4为例 该环境的文件上传…

Selenium安装WebDriver Chrome驱动(含 116/117/118/119/120/)

1、确认浏览器的版本 在浏览器的地址栏&#xff0c;输入chrome://version/&#xff0c;回车后即可查看到对应版本 2、找到对应的chromedriver版本 2.1 114及之前的版本可以通过点击下载chromedriver,根据版本号&#xff08;只看大版本&#xff09;下载对应文件 2.2 116版本…

[动态规划] (五) 路径问题: LeetCode 62.不同路径

[动态规划] (五) 路径问题: LeetCode 62.不同路径 文章目录 [动态规划] (五) 路径问题: LeetCode 62.不同路径题目解析解题思路状态表示状态转移方程初始化和填表返回值 代码实现总结 62. 不同路径 题目解析 (1) 机器人从左上角到右下角有多少方法 (2) 机器人只能向左或者向右…

C++中浅复制及其存在的问题

C中浅复制及其存在的问题 之前的示例程序中 MyString 类包含一个指针成员 buffer&#xff0c;它指向动态分配的内存&#xff08;这些内存是在构造函数中使用 new 分配的&#xff0c;并在析构函数中使用 delete[]进行释放&#xff09;。复制这个类的对象时&#xff0c;将复制其…

解决Visual Studio Code 控制台中文乱码问题

C和CPP运行编码指定 "code-runner.executorMap": {"c": "cd $dir && gcc -fexec-charsetGBK $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt","cpp": "cd $dir && g -fexec-charsetGBK $…

LVGL_多界面切换

LVGL_多界面切换 1、创建多个界面&#xff08;create_page1();&#xff09; 2、加载一个界面显示&#xff08;lv_scr_load(page1);&#xff09; 3、切换不同界面显示&#xff08;lv_scr_load_anim(page2, LV_SCR_LOAD_ANIM_OVER_LEFT, 300, 0, false);&#xff09; static lv_…