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第三十七节(自定义插件之自定义指令)防重指令
引言:自定义指令,我们可以通过插件的形式进行全局注册: 例如:在提交按钮请求接口时候,为了防止重复提交,而导致的请求资源浪费,或者是新增提交时候,防止新增相同的数据。 我们的全局…...
面试高频问题----5
一、线程池参数的执行顺序 1.如果线程池中的线程数量小于核心线程数,则创建新的线程来处理任务 2.如果线程池中的线程数量等于核心线程数,但工作队列未满,将任务放入工作队列中执行 3.如果工作队列已满,但线程数小于最大线程数…...
计算机网络 —— 网络层(子网掩码和子网划分)
计算机网络 —— 网络层(子网掩码和子网划分) 网络地址转换NAT子网掩码和子网划分举个例子第一步:看类型第二步:从主机号开始比对第三步:去头去尾 我们今天来看子网掩码和子网划分: 网络地址转换NAT 网络…...
2024 IDEA最新永久使用码教程(2099版)
本篇文章我就来分享一下2024年当前最新版 IntelliJ IDEA 最新注册码,教程如下,可免费永久,亲测有效,适合Windows和Mac。 本教程适用于 J B 全系列产品,包括 Pycharm、IDEA、WebStorm、Phpstorm、Datagrip、RubyMine、…...
http协议,tomcat的作用
HTTP 概念:Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则。 特点: 1.基于TCP协议:面向连接,安全 2. 基于请求-响应模型的:一次请求对应一次响应 3HTTP协议是无状态的协议:对于事务处理没有记忆能…...
有哪些针对平台端口的常见攻击手段
针对平台端口的攻击可以通过多种手段进行,这些手段涵盖了从扫描探测到利用漏洞入侵的整个过程。以下是一些常见的攻击手段及其简要描述: 端口扫描攻击: 攻击者使用端口扫描工具(如Nmap)探测目标系统开放的端口。通过分…...
Xcode下载安装
1.Xcode可用版本判断: 2.Xcode下载安装: 方案1:AppStore 下载更新 若方案1失败则 方案2:指定版本Xcode包下载解压安装 苹果下载 3.Xcode命令行工具插件安装 xcode-select --install 备注: xcode_x.x.x.xip(压缩包存在时效性(使用前24h/…...
【 k8s 标签与选择器 】
一、标签(Label) 用于给Kubernetes资源(如Pod、Service、Deployment等)打上自定义的键值对标识。以便更方便地管理和操作这些资源。 在各类资源的 metadata.labels 中进行配置。可以通过改配置文件的方式打标签。 apiVersion: v1…...
【模拟-BM99 顺时针旋转矩阵】
题目 BM99 顺时针旋转矩阵 描述 有一个NxN整数矩阵,请编写一个算法,将矩阵顺时针旋转90度。 给定一个NxN的矩阵,和矩阵的阶数N,请返回旋转后的NxN矩阵。 分析 模拟,写几个样例,分析一下新矩阵元素下标与原矩阵元素…...
今年618,京东和爱奇艺为大屏品质“把关”
今年618电视大战,还是打响了。 根据京东618数据显示,618开门红阶段热卖TOP10电视均为75英寸以上的大屏,拥有超高画质的MiniLED电视成交量同比增长5倍。可以看到,大屏电视逐步成为消费主流,尤其是拥有出色视听体验的高…...
NSS题目练习7
[MoeCTF 2022]baby_file 打开看见一串源代码,需要get传参传入file 题目提示php伪协议 用dirsearch扫描发现flag.php 用php伪协议查看,回显一串base64编码 解码后得到flag [鹤城杯 2021]Middle magic 读取这两个文件 一个php正则表达式 补充:…...
聊一聊大数据需求的流程
大致的流程:需求对接、口径梳理、数据开发、任务发布、任务监控、任务保障 流程图 startuml skinparam packageStyle rectangleactor 需求方 participant 数据BP as 数据组 participant 离线数仓 participant 实时数仓需求方 -> 数据组: 提出需求 数据组 -> …...
老黄一举揭秘三代GPU!打破摩尔定律,打造AI帝国,量产Blackwell解决ChatGPT全球耗电难题
近日,老黄手持Blackwell向全世界展示的那一刻,全场观众沸腾了。 这是迄今为止世界上最大的芯片! 用老黄的话来说,它是「全世界迄今为止制造出来的最复杂、性能最高的计算机。」GPT-4o深夜发布!Plus免费可用!…...
HTML静态网页成品作业(HTML+CSS)—— 家乡南宁介绍网页(2个页面)
🎉不定期分享源码,关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 🏷️本套采用HTMLCSS,未使用Javacsript代码,共有2个页面。 二、作品演示 三、代…...
把qml程序制作成安装包(Windows)
先检查一下有没有安装Qt Installer FrameWork 需要用到Qt自带的打包工具: Qt Installer FrameWork,虽然有点拉胯,但是也能用用。一般放在Qt目录下的Tools文件夹下,如果没有看到,就去在线下载器去下载一下。 步骤1 随…...
内网中redis无法连接访问问题
这个错误信息说明 Redis 正在以受保护模式运行,这意味着它仅从本地回环接口(localhost 或 127.0.0.1)接受连接。如果你希望从外部计算机连接到 Redis,你需要采取一些措施来允许外部连接。 这里有一些解决方案: 禁用受…...
Unix环境高级编程第二版:深入探索与实战解析
Unix环境高级编程第二版:深入探索与实战解析 在信息化时代,Unix环境高级编程无疑是程序员们攀登技术高峰的必经之路。本文将针对《Unix环境高级编程第二版》一书,从四个方面、五个方面、六个方面和七个方面进行深入探讨,带您领略…...
SSL/TLS和HTTPS
HTTPS就是用了TLS包装的Socket进行通信的HTTP 混合加密 被称为混合加密。具体过程如下: 使用非对称加密协商对称密钥: 在通信的开始阶段,通常由客户端和服务器使用非对称加密算法(如RSA)来协商一个对称密钥。通常情…...
苹果将推出“Apple Intelligence”AI系统,专注于隐私和广泛应用|TodayAI
据彭博社报道,苹果公司将在下周的 WWDC 2024 开发者大会上揭晓其全新的 AI 系统——“Apple Intelligence”,该系统将适用于 iPhone、iPad 和 Mac 设备。这一新系统将结合苹果自身技术和 OpenAI 的工具,为用户提供一系列新的 AI 功能…...
配置Kubernetes资源管理Secret与ConfigMap
前言 Kubernetes 中的 Secret(提供加密模式)和 ConfigMap(提供配置)是关键的资源,用于安全地存储和管理敏感信息和配置数据。它们在应用程序开发和部署过程中扮演着重要的角色。本文将介绍如何有效地配置和管理这些资…...
ES6从入门到精通:前言
ES6简介 ES6(ECMAScript 2015)是JavaScript语言的重大更新,引入了许多新特性,包括语法糖、新数据类型、模块化支持等,显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var…...
uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖
在前面的练习中,每个页面需要使用ref,onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入,需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
在WSL2的Ubuntu镜像中安装Docker
Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包: for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...
SAP学习笔记 - 开发26 - 前端Fiori开发 OData V2 和 V4 的差异 (Deepseek整理)
上一章用到了V2 的概念,其实 Fiori当中还有 V4,咱们这一章来总结一下 V2 和 V4。 SAP学习笔记 - 开发25 - 前端Fiori开发 Remote OData Service(使用远端Odata服务),代理中间件(ui5-middleware-simpleproxy)-CSDN博客…...
Linux离线(zip方式)安装docker
目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1:修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本:CentOS 7 64位 内核版本:3.10.0 相关命令: uname -rcat /etc/os-rele…...
【VLNs篇】07:NavRL—在动态环境中学习安全飞行
项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战,克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
