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.pswp.cn/news/40740.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/40740.shtml
英文地址,請注明出處:http://en.pswp.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…