vue3实现防抖、单页面引入、全局引入、全局挂载

文章目录

  • 代码实现
  • 单页面引入
  • 全局引入
  • 使用


代码实现

const debounce = (fn: any, delay: number) => {let timer: any = undefined;return (item: any) => {if (timer) clearTimeout(timer);timer = setTimeout(() => fn(item), delay);}
};export default debounce;

单页面引入

// 防抖(单页面引用)
import debounce from '../../../utils/debounce';

全局引入

main.ts

import App from './App.vue';
import debounce from './utils/debounce';const app = createApp(App);
app.config.globalProperties.$debounce = debounce;

使用

html

<el-slider v-model="sliderValue" size="small" show-input @input="handleScheduleInput" />

单页面使用

let handleScheduleInput = debounce((val: number) => {console.log('滑块: ', val);
}, 1000 * 1);

全局使用

// 防抖(全局挂载)
let self = getCurrentInstance()?.appContext.config.globalProperties;let handleScheduleInput = self?.$debounce((val: number) => {console.log('滑块: ', val);
}, 2000 * 1);

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/40740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python + Selenium 处理浏览器Cookie

工作中遇到这么一个场景&#xff1a;自动化测试登录的时候需要输入动态验证码&#xff0c;由于某些原因&#xff0c;需要从一个已登录的机器上&#xff0c;复制cookie过来&#xff0c;到自动化这边绕过登录。 浏览器的F12里复制出来的cookie内容是文本格式的&#xff1a; uui…

【第二讲---初识SLAM】

SLAM简介 视觉SLAM&#xff0c;主要指的是利用相机完成建图和定位问题。如果传感器是激光&#xff0c;那么就称为激光SLAM。 定位&#xff08;明白自身状态&#xff08;即位置&#xff09;&#xff09;建图&#xff08;了解外在环境&#xff09;。 视觉SLAM中使用的相机与常见…

VB+SQL银行设备管理系统设计与实现

摘要 随着银行卡的普及,很多地方安装了大量的存款机、取款机和POS机等银行自助设备。银行设备管理系统可以有效的记录银行设备的安装和使用情况,规范对自助设备的管理,从而为用户提供更加稳定和优质的服务。 本文介绍了银行设备管理系统的设计和开发过程,详细阐述了整个应…

Flink之Task解析

Flink之Task解析 对Flink的Task进行解析前,我们首先要清楚几个角色TaskManager、Slot、Task、Subtask、TaskChain分别是什么 角色注释TaskManager在Flink中TaskManager就是一个管理task的进程,每个节点只有一个TaskManagerSlotSlot就是TaskManager中的槽位,一个TaskManager中可…

数据结构单链表

单链表 1 链表的概念及结构 概念&#xff1a;链表是一种物理存储结构上非连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序是通过链表中的指针链 接次序实现的 。 在我们开始讲链表之前&#xff0c;我们是写了顺序表&#xff0c;顺序表就是类似一个数组的东西&#xff0…

上海虚拟展厅制作平台怎么选,蛙色3DVR 助力行业发展

引言&#xff1a; 在数字化时代&#xff0c;虚拟展厅成为了企业宣传的重要手段。而作为一家位于上海的实力平台&#xff0c;上海蛙色3DVR凭借其卓越的功能和创新的技术&#xff0c;成为了企业展示和宣传的首选。 一、虚拟展厅的优势 虚拟展厅的崛起是指随着科技的进步&#x…

36_windows环境debug Nginx 源码-使用 VSCode 和WSL

文章目录 配置 WSL编译 NginxVSCode 安装插件launch.json配置 WSL sudo apt-get -y install gcc cmake sudo apt-get -y install pcre sudo apt-get -y install libpcre3 libpcre3-dev sudo apt-get

手机商城网站的分析与设计(论文+源码)_kaic

目录 摘 要 1 1 绪论 2 1.1选题背景意义 2 1.2国内外研究现状 2 1.2.1国内研究现状 2 1.2.2国外研究现状 3 1.3研究内容 3 2 网上手机商城网站相关技术 4 2.1.NET框架 4 2.2Access数据库 4 2.3 JavaScript技术 4 3网上手机商城网站分析与设…

Grafana+Prometheus技术文档-进阶使用-监控spring-boot项目

阿丹&#xff1a; 之前已经实现了使用Prometheus来对服务器进行了监控和仪表盘的创建&#xff0c;现在就需要对这些监控方法使用在spring-boot中去。 实现思路&#xff1a; 1、集成Actuator 2、加入Prometheus的依赖 3、配置开放端口、以及开放监控 4、配置Prometheus中的配置…

一次网络不通“争吵“引发的思考

作者&#xff1a; 郑明泉、余凯 为啥争吵&#xff0c;吵什么&#xff1f; “你到底在说什么啊&#xff0c;我K8s的ecs节点要访问clb的地址不通和本地网卡有什么关系…” 气愤语气都从电话那头传了过来&#xff0c;这时电话两端都沉默了。过了好一会传来地铁小姐姐甜美的播报声…

iview默认样式覆盖

scoped 属性是 HTML5 中的新属性。 当style标签拥有scoped属性时&#xff0c;它的css样式只能用于当前的Vue组件&#xff0c;可以使组件的样式不相互污染。 如果一个项目的所有style标签都加上了scoped属性&#xff0c;相当于实现了样式的模块化。 1、全页面覆盖 不添加scoped…

【一】ubuntu20.04上搭建containerd版( 1.2.4 以上)k8s及kuboard V3

k8s 部署全程在超级用户下进行 sudo su本文请根据大纲顺序阅读&#xff01; 一、配置基础环境&#xff08;在全部节点执行&#xff09; 1、安装docker 使用apt安装containerd 新版k8s已经弃用docker转为containerd&#xff0c;如果要将docker改为containerd详见&#xff1a…

对dubbo的DubboReference.check的参数进行剖析

背景 在使用dubbo的时候&#xff0c;发现当消费者启动的时候&#xff0c;如果提供者没有启动&#xff0c;即使提供者后来启动了&#xff0c;消费者也调不通提供者提供的接口了。 注册中心使用都是nacos dubbo版本是3.0.4 例子 接口 public interface DemoService {String…

“深入解析JVM内部机制:探秘Java虚拟机的奥秘“

标题&#xff1a;深入解析JVM内部机制&#xff1a;探秘Java虚拟机的奥秘 摘要&#xff1a;本文将深入解析JVM&#xff08;Java虚拟机&#xff09;的内部机制&#xff0c;从字节码执行到垃圾回收&#xff0c;逐步揭示Java程序运行的奥秘。通过理论分析和示例代码&#xff0c;读…

thinkphp5.1 trace 不显示sql语句

config/app.php app_debug > true,//线上环境为 false // 应用Trace app_trace > true,//线上环境为 false config/database.php debug > true, config/log.php close > false, thinkphp5.1x 设计非常奇怪 必须开启…

使用dockerfile手动构建JDK11镜像运行容器并校验

Docker官方维护镜像的公共仓库网站 Docker Hub 国内无法访问了&#xff0c;大部分镜像无法下载&#xff0c;准备逐步构建自己的镜像库。【转载aliyun官方-容器镜像服务 ACR】Docker常见问题 阿里云容器镜像服务ACR&#xff08;Alibaba Cloud Container Registry&#xff09;是面…

内网穿透-外远程连接中的RabbitMQ服务

文章目录 前言1.安装erlang 语言2.安装rabbitMQ3. 内网穿透3.1 安装cpolar内网穿透(支持一键自动安装脚本)3.2 创建HTTP隧道 4. 公网远程连接5.固定公网TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址 前言 RabbitMQ是一个在 AMQP(高级消息队列协议)基…

Linux:shell脚本:基础使用(4)《正则表达式-grep工具》

正则表达式定义&#xff1a; 使用单个字符串来描述&#xff0c;匹配一系列符合某个句法规则的字符串 正则表达式的组成&#xff1a; 普通字符串: 大小写字母&#xff0c;数字&#xff0c;标点符号及一些其他符号 元字符&#xff1a;在正则表达式中具有特殊意义的专用字符 正则表…

python中__main__的解释

源自于&#xff1a;https://zhuanlan.zhihu.com/p/340997807 Python程序运行时是从模块顶行开始&#xff0c;最顶层&#xff08;没有被缩进&#xff09;的代码都会被执行&#xff0c;所以Python中并不需要一个统一的main()作为程序的入口。 __name__是Python的内置变量&#…

蓝桥杯嵌入式省一教程:(三)按键扫描与定时器中断

在第一讲中曾经提到&#xff0c;GPIO有输入输出两种模式。在点亮LED时&#xff0c;我们已经使用了GPIO输出模式&#xff0c;在按键识别中&#xff0c;我们将要使用GPIO输入模式。首先来看看按键的电路原理图&#xff08;下图在选手资源数据包——CT117E-M4产品手册中&#xff0…