当前位置: 首页 > news >正文

vue3第三十七节(自定义插件之自定义指令)防重指令

引言:自定义指令,我们可以通过插件的形式进行全局注册:
例如:在提交按钮请求接口时候,为了防止重复提交,而导致的请求资源浪费,或者是新增提交时候,防止新增相同的数据。
我们的全局注册自定义防重按钮

1、编写防重指令插件

// plugins/myDirective/index.ts 文件

import { App, AppContext} from 'vue'
export default {// 通过install 方法install(app:App, config:AppContext) {app.directive('MyRepeat', {mounted: function(el: HTMLButtonElement, binding: any) {el.addEventListener('click',() => {if (!el.disabled) {el.disabled = truelet timer: number | undefined = setTimeout(():void => {el.disabled = falseclearTimeout(timer)timer = undefined}, binding.value || 2000)}})}})}
}

注意:在定义自定义指令时候,我们通常用到的,只有 mounted 和 updated 生命钩子函数;详情参考自定义指令

2、引入自定义插件

// main.ts

import { createApp } from 'vue'
import myDirective from './plugins/myDirective/index.ts'
const app = createApp(App)
// 全局注册 指令 myDirective
app.use(myDirective)

3、使用自定义插件

通过 v-xx 写法 直接给按钮添加新的指令即可 v-myRepeat

<template>
<el-button v-myRepeat @click="handleChangeNum">自定义插件指令-{{num}}</el-button>
</template>
<script setup>
import { ref, onActivated, inject, getCurrentInstance } from "vue"
const num = ref(0)
const handleChangeNum = () => {num.value = num.value + 1console.log('===', num.value)
}
</script>

相关文章:

vue3第三十七节(自定义插件之自定义指令)防重指令

引言&#xff1a;自定义指令&#xff0c;我们可以通过插件的形式进行全局注册&#xff1a; 例如&#xff1a;在提交按钮请求接口时候&#xff0c;为了防止重复提交&#xff0c;而导致的请求资源浪费&#xff0c;或者是新增提交时候&#xff0c;防止新增相同的数据。 我们的全局…...

面试高频问题----5

一、线程池参数的执行顺序 1.如果线程池中的线程数量小于核心线程数&#xff0c;则创建新的线程来处理任务 2.如果线程池中的线程数量等于核心线程数&#xff0c;但工作队列未满&#xff0c;将任务放入工作队列中执行 3.如果工作队列已满&#xff0c;但线程数小于最大线程数…...

计算机网络 —— 网络层(子网掩码和子网划分)

计算机网络 —— 网络层&#xff08;子网掩码和子网划分&#xff09; 网络地址转换NAT子网掩码和子网划分举个例子第一步&#xff1a;看类型第二步&#xff1a;从主机号开始比对第三步&#xff1a;去头去尾 我们今天来看子网掩码和子网划分&#xff1a; 网络地址转换NAT 网络…...

2024 IDEA最新永久使用码教程(2099版)

本篇文章我就来分享一下2024年当前最新版 IntelliJ IDEA 最新注册码&#xff0c;教程如下&#xff0c;可免费永久&#xff0c;亲测有效&#xff0c;适合Windows和Mac。 本教程适用于 J B 全系列产品&#xff0c;包括 Pycharm、IDEA、WebStorm、Phpstorm、Datagrip、RubyMine、…...

http协议,tomcat的作用

HTTP 概念:Hyper Text Transfer Protocol&#xff0c;超文本传输协议&#xff0c;规定了浏览器和服务器之间数据传输的规则。 特点: 1.基于TCP协议:面向连接&#xff0c;安全 2. 基于请求-响应模型的:一次请求对应一次响应 3HTTP协议是无状态的协议:对于事务处理没有记忆能…...

有哪些针对平台端口的常见攻击手段

针对平台端口的攻击可以通过多种手段进行&#xff0c;这些手段涵盖了从扫描探测到利用漏洞入侵的整个过程。以下是一些常见的攻击手段及其简要描述&#xff1a; 端口扫描攻击&#xff1a; 攻击者使用端口扫描工具&#xff08;如Nmap&#xff09;探测目标系统开放的端口。通过分…...

Xcode下载安装

1.Xcode可用版本判断&#xff1a; 2.Xcode下载安装&#xff1a; 方案1:AppStore 下载更新 若方案1失败则 方案2:指定版本Xcode包下载解压安装 苹果下载 3.Xcode命令行工具插件安装 xcode-select --install 备注&#xff1a; xcode_x.x.x.xip(压缩包存在时效性(使用前24h/…...

【 k8s 标签与选择器 】

一、标签&#xff08;Label&#xff09; 用于给Kubernetes资源&#xff08;如Pod、Service、Deployment等&#xff09;打上自定义的键值对标识。以便更方便地管理和操作这些资源。 在各类资源的 metadata.labels 中进行配置。可以通过改配置文件的方式打标签。 apiVersion: v1…...

【模拟-BM99 顺时针旋转矩阵】

题目 BM99 顺时针旋转矩阵 描述 有一个NxN整数矩阵&#xff0c;请编写一个算法&#xff0c;将矩阵顺时针旋转90度。 给定一个NxN的矩阵&#xff0c;和矩阵的阶数N,请返回旋转后的NxN矩阵。 分析 模拟&#xff0c;写几个样例&#xff0c;分析一下新矩阵元素下标与原矩阵元素…...

今年618,京东和爱奇艺为大屏品质“把关”

今年618电视大战&#xff0c;还是打响了。 根据京东618数据显示&#xff0c;618开门红阶段热卖TOP10电视均为75英寸以上的大屏&#xff0c;拥有超高画质的MiniLED电视成交量同比增长5倍。可以看到&#xff0c;大屏电视逐步成为消费主流&#xff0c;尤其是拥有出色视听体验的高…...

NSS题目练习7

[MoeCTF 2022]baby_file 打开看见一串源代码&#xff0c;需要get传参传入file 题目提示php伪协议 用dirsearch扫描发现flag.php 用php伪协议查看&#xff0c;回显一串base64编码 解码后得到flag [鹤城杯 2021]Middle magic 读取这两个文件 一个php正则表达式 补充&#xff1a…...

聊一聊大数据需求的流程

大致的流程&#xff1a;需求对接、口径梳理、数据开发、任务发布、任务监控、任务保障 流程图 startuml skinparam packageStyle rectangleactor 需求方 participant 数据BP as 数据组 participant 离线数仓 participant 实时数仓需求方 -> 数据组: 提出需求 数据组 -> …...

老黄一举揭秘三代GPU!打破摩尔定律,打造AI帝国,量产Blackwell解决ChatGPT全球耗电难题

近日&#xff0c;老黄手持Blackwell向全世界展示的那一刻&#xff0c;全场观众沸腾了。 这是迄今为止世界上最大的芯片&#xff01; 用老黄的话来说&#xff0c;它是「全世界迄今为止制造出来的最复杂、性能最高的计算机。」GPT-4o深夜发布&#xff01;Plus免费可用&#xff01…...

HTML静态网页成品作业(HTML+CSS)—— 家乡南宁介绍网页(2个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有2个页面。 二、作品演示 三、代…...

把qml程序制作成安装包(Windows)

先检查一下有没有安装Qt Installer FrameWork 需要用到Qt自带的打包工具&#xff1a; Qt Installer FrameWork&#xff0c;虽然有点拉胯&#xff0c;但是也能用用。一般放在Qt目录下的Tools文件夹下&#xff0c;如果没有看到&#xff0c;就去在线下载器去下载一下。 步骤1 随…...

内网中redis无法连接访问问题

这个错误信息说明 Redis 正在以受保护模式运行&#xff0c;这意味着它仅从本地回环接口&#xff08;localhost 或 127.0.0.1&#xff09;接受连接。如果你希望从外部计算机连接到 Redis&#xff0c;你需要采取一些措施来允许外部连接。 这里有一些解决方案&#xff1a; 禁用受…...

Unix环境高级编程第二版:深入探索与实战解析

Unix环境高级编程第二版&#xff1a;深入探索与实战解析 在信息化时代&#xff0c;Unix环境高级编程无疑是程序员们攀登技术高峰的必经之路。本文将针对《Unix环境高级编程第二版》一书&#xff0c;从四个方面、五个方面、六个方面和七个方面进行深入探讨&#xff0c;带您领略…...

SSL/TLS和HTTPS

HTTPS就是用了TLS包装的Socket进行通信的HTTP 混合加密 被称为混合加密。具体过程如下&#xff1a; 使用非对称加密协商对称密钥&#xff1a; 在通信的开始阶段&#xff0c;通常由客户端和服务器使用非对称加密算法&#xff08;如RSA&#xff09;来协商一个对称密钥。通常情…...

苹果将推出“Apple Intelligence”AI系统,专注于隐私和广泛应用|TodayAI

据彭博社报道&#xff0c;苹果公司将在下周的 WWDC 2024 开发者大会上揭晓其全新的 AI 系统——“Apple Intelligence”&#xff0c;该系统将适用于 iPhone、iPad 和 Mac 设备。这一新系统将结合苹果自身技术和 OpenAI 的工具&#xff0c;为用户提供一系列新的 AI 功能&#xf…...

配置Kubernetes资源管理Secret与ConfigMap

前言 Kubernetes 中的 Secret&#xff08;提供加密模式&#xff09;和 ConfigMap&#xff08;提供配置&#xff09;是关键的资源&#xff0c;用于安全地存储和管理敏感信息和配置数据。它们在应用程序开发和部署过程中扮演着重要的角色。本文将介绍如何有效地配置和管理这些资…...

FlexASIO:打破专业音频壁垒的通用驱动解决方案

FlexASIO&#xff1a;打破专业音频壁垒的通用驱动解决方案 【免费下载链接】FlexASIO A flexible universal ASIO driver that uses the PortAudio sound I/O library. Supports WASAPI (shared and exclusive), KS, DirectSound and MME. 项目地址: https://gitcode.com/gh_…...

从座舱芯片到指尖触控:聊聊高通8155/8295上那个你可能没注意到的Virtio Touch框架

从座舱芯片到指尖触控&#xff1a;高通8155/8295中的Virtio Touch框架解析 当你的手指在车载中控屏上滑动时&#xff0c;一组坐标数据正以微秒级速度穿越两个操作系统——这背后是高通座舱芯片中鲜为人知的Virtio Touch框架在发挥作用。作为连接QNX Hypervisor与Android系统的神…...

5分钟掌握精灵图智能切割:Pixelorama扩展让资源提取效率倍增

5分钟掌握精灵图智能切割&#xff1a;Pixelorama扩展让资源提取效率倍增 【免费下载链接】Pixelorama A free & open-source 2D sprite editor, made with the Godot Engine! Available on Windows, Linux, macOS and the Web! 项目地址: https://gitcode.com/gh_mirrors…...

C++ 无原生 JSON 支持?一文实现通用序列化与反序列化封装方案

前言 在现代软件开发中&#xff0c;JSON&#xff08;JavaScript Object Notation&#xff09;因其轻量级和易读性成为数据交换的主流格式。C虽无原生JSON支持&#xff0c;但通过封装第三方库&#xff08;如nlohmann/json&#xff09;&#xff0c;可高效实现序列化&#xff08;…...

NCMDump解密工具:3步解锁网易云音乐加密文件,实现跨平台自由播放

NCMDump解密工具&#xff1a;3步解锁网易云音乐加密文件&#xff0c;实现跨平台自由播放 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式文件无法在其他播放器播放而烦恼吗&#xff1f;NCMDump是一款专…...

滚动轴承动力学模型代码复现及三维模型SolidWorks文件分享

滚动轴承动力学模型代码 #指定了某篇paper复现&#xff0c;具体都如图打包在文件夹了&#xff0c;保证程序可以打开。 给出轴承三维模型solidworks软件打开2019版本可以打开。打开SolidWorks轴承模型时&#xff0c;金属滚珠与保持架的精密配合让人想起小时候拆解机械闹钟的经历…...

【NR 定位】3GPP NR Positioning 5G定位标准解读(七):RRC_INACTIVE状态下的高效定位机制

1. RRC_INACTIVE状态下的5G定位挑战与机遇 在5G网络中&#xff0c;RRC_INACTIVE状态是一种独特的节能模式&#xff0c;它允许设备在保持部分网络连接的同时大幅降低功耗。这种状态特别适合物联网设备&#xff0c;比如智能电表、资产追踪器和可穿戴设备。想象一下你家的智能门锁…...

C++ 浮点数

在 C 中有以下 3 种数据类型可以表示浮点数&#xff0c;分别是 float、double 和 long double。 float 数据类型被认为是单精度。double 数据类型通常是 float 的两倍大小&#xff0c;因此被认为是双精度。顾名思义&#xff0c;long double 数据类型又比 double 要大。这些数据…...

嵌入式系统常用轻量级校验算法解析

单片机中常用的轻量级校验算法 1. 校验算法概述 在嵌入式系统开发中&#xff0c;数据校验是确保通信可靠性和数据完整性的关键技术手段。无论是UART通信中的奇偶校验、CAN总线中的CRC校验&#xff0c;还是Modbus、MAVlink、USB等协议中的校验机制&#xff0c;都体现了校验算法…...

Phi-3-Mini-128K应用场景:新能源电池BMS固件日志智能归因与故障预测

Phi-3-Mini-128K应用场景&#xff1a;新能源电池BMS固件日志智能归因与故障预测 想象一下&#xff0c;你是一家新能源车企的BMS&#xff08;电池管理系统&#xff09;软件工程师。凌晨三点&#xff0c;你的手机响了&#xff0c;生产线告警&#xff1a;一批电池包的固件在测试中…...