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

vue3自定义指令批量注册

第一步、在src目录下新建directives文件文件夹

用来存放不同的指令,以dbounce指令为例:

第二步、在directives目录下创建debounce.js文件,文件内容如下:

// 防抖
const debounceClick = {mounted(el, binding) {let timerel.addEventListener('click', () => {if (timer) {clearTimeout(timer)}timer = setTimeout(() => {binding.value.fn()}, binding.value.time)})}
}
export default debounceClick;

第三步、在directives目录下创建index.js文件,文件内容如下:

import debounceClick from "./debounce"; // 引入需要的指令const directivesList = {debounceClick // 挂载 ,这里防抖指令的名字不要定义为debounce,否则不生效,原因暂未找到,欢迎大神留言指导
};const directives = {install: function (app) {Object.keys(directivesList).forEach((key) => {app.directive(key, directivesList[key]); // 注册});}
};export default directives;// 抛出

第四步、在main.js中引入注册

import { createApp } from 'vue'
import App from './App.vue'
import Directives from '@/directives/index'
const app = createApp(App)
app.use(Directives)
app.mount('#app')

第五步、在模版中使用

<template><el-button type="success" plain v-debounceClick="{'fn':openDialog, 'time': 1000}">防抖测试</el-button>
</template><script setup>const openDialog = ()=> {console.log("防抖函数执行了")}
</script>

相关文章:

vue3自定义指令批量注册

第一步、在src目录下新建directives文件文件夹 用来存放不同的指令&#xff0c;以dbounce指令为例&#xff1a; 第二步、在directives目录下创建debounce.js文件&#xff0c;文件内容如下&#xff1a; // 防抖 const debounceClick {mounted(el, binding) {let timerel.addE…...

山西电力市场日前价格预测【2023-10-18】

日前价格预测 预测说明&#xff1a; 如上图所示&#xff0c;预测明日&#xff08;2023-10-18&#xff09;山西电力市场全天平均日前电价为348.72元/MWh。其中&#xff0c;最高日前电价为505.50元/MWh&#xff0c;预计出现在18: 00。最低日前电价为288.10元/MWh&#xff0c;预计…...

2-k8s-控制器介绍

文章目录 一、控制器类型二、Deployment控制器三、SatefulSet控制器四、Daemonset控制器五、Job控制器六、CronJob 控制器 一、控制器类型 Deployment&#xff1a;适合无状态的服务部署StatefullSet&#xff1a;适合有状态的服务部署DaemonSet&#xff1a;一次部署&#xff0c…...

【数据结构】二叉树--OJ练习题

目录 1 单值二叉树 2 相同的树 3 另一颗树的子树 4 二叉树的前序遍历 5 二叉树的最大深度 6 对称二叉树 7 二叉树遍历 1 单值二叉树 965. 单值二叉树 - 力扣&#xff08;LeetCode&#xff09; bool isUnivalTree(struct TreeNode* root) {if (root NULL){return true;}…...

时间复杂度为 O(n^2) 的排序算法

大家好&#xff0c;我是 方圆。对于小规模数据&#xff0c;我们可以选用时间复杂度为 O(n2) 的排序算法&#xff0c;因为时间复杂度并不代表实际代码的执行时间&#xff0c;而且它也省去了低阶、系数和常数&#xff0c;仅代表的增长趋势&#xff0c;所以在小规模数据情况下&…...

ES6 Map数据结构

1.Map是什么&#xff1f; ES6 提供的另一种新的引用类型的数据结构 它类似于对象&#xff0c;也是键值对的集合&#xff0c;但是“键”的范围不限于字符串&#xff0c;各种类型的值&#xff08;包括对象&#xff09;都可以当作键&#xff09; 以前引用类型中的对象也是键值对…...

网页数据采集HTTP Get,Post登录提交数据--VBS之Microsoft.XMLHTTP对象

MSXML中提供了Microsoft.XMLHTTP对象&#xff0c;能够完成从数据包到Request对象的转换以及发送任务。 创建XMLHTTP对象的语句如下&#xff1a; Set objXML CreateObject("Msxml2.XMLHTTP") 或 Set objXML CreateObject(“Microsoft.XMLHTTP”) Or, for version 3…...

强化科技创新“辐射力”,中国移动的数智化大棋局

作者 | 曾响铃 文 | 响铃说 丝滑流畅的5G连接、每时每刻的数字生活服务、无处不在的智能终端、拟人交流的AI助手、梦幻般的XR虚拟现实、直接感受的裸眼3D…… 不知不觉&#xff0c;那个科幻片中的世界&#xff0c;越来越近。 数智化新世界的“气氛”&#xff0c;由一个个具…...

喜报 | 擎创科技实力亮相2023科创会并荣获科技创新奖

近日&#xff0c;由国家互联网数据中心产业技术创新战略联盟&#xff08;NIISA&#xff09;主办的“2023第二届国际互联网产业科技创新大会暨互联网创新产品展览会”于北京圆满落幕。 擎创科技副总裁冯陈湧受邀出席本次论坛&#xff0c;并发表了“银行分布式核心智能运维体系思…...

vue3学习(九)--- keep-alive缓存组件

有时候我们不希望组件被重新渲染影响使用体验&#xff1b;或者处于性能考虑&#xff0c;避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就需要用到keep-alive组件。 keep-alive有两个独有的生命周期&#xff1a;activated、 deactivated 接下来看…...

用servlet实现一个简单的猜数字游戏。

需要两个页面&#xff0c;一个jsp页面&#xff08;guess.jsp&#xff09;和servlet页面&#xff08;servlet&#xff09;。 一.jsp页面 在jsp页面中需要实现&#xff1a; 1.创建随机数并且保存在session中。 2.做个form表单提交猜的数字给servlet页面。 <%page import&…...

前端取消请求

取消请求 发送一个异步请求获取数据&#xff0c;并在控制台中打印出返回结果。这里使用了 fetch 方法来发送请求&#xff0c;同时使用 AbortController 对象来实现请求的取消操作。 具体来说&#xff0c;代码中定义了一个 list 函数&#xff0c;该函数会创建一个 AbortContro…...

关于6轴球腕机械臂的肩部奇异描述纠正

对于常见的球腕6轴机械臂构型&#xff0c;在大多数资料中奇异点描述如下&#xff1a; 肩部奇异点&#xff08;Shoulder singularity&#xff09;&#xff1a; 肩部奇异点是在机器人手腕的中心与J1轴关节在同一条直线上时发生。这种情况下&#xff0c;会导致关节轴1和4试图瞬间旋…...

Python —— hou.Node class

Houdini内所有节点&#xff08;Object、SOP、COP等&#xff09;的基类&#xff0c;该类的实例对应houdini内的节点&#xff1b; 每个节点都有一个唯一的路径&#xff08;定义其在节点树内的位置&#xff09;&#xff1b;节点路径层次结构类似于文件系统中的文件和文件夹的层次结…...

MATLAB——RBF、GRNN和PNN神经网络案例参考程序

欢迎关注“电击小子程高兴的MATLAB小屋” %————RBF程序实例 %% I. 清空环境变量 clear all clc %% II. 训练集/测试集产生 %% % 1. 导入数据 load spectra_data.mat %% % 2. 随机产生训练集和测试集 temp randperm(size(NIR,1)); % 训练集——50个样本 P_train NIR(t…...

E138: Can‘t write viminfo file

E138: Can’t write viminfo file /home/xxx/.viminfo! 原因 进入/home/xxx/目录下&#xff0c;用ls -a你会发现有很多.viminfa.tmp - .viminfz.tmp 这种的临时文件&#xff0c;这是因为使用vim编辑器时&#xff0c;如果编辑器没有正常退出就会生成一个暂存文件&#xff0c;…...

Compose Canvas基础(2) 图形转换

Compose Canvas基础&#xff08;2&#xff09;图形转换 前言平移 translate缩放 scale旋转 rotate自定义绘图区域及绘制内边距inset组合转换 withTransform完整代码总结 上一篇文章 Compose Canvas基础&#xff08;1&#xff09; drawxxx方法 前言 阅读本文需要一定compose基…...

【计算机网络笔记】分组交换中的报文交付时间计算例题

系列文章目录 什么是计算机网络&#xff1f; 什么是网络协议&#xff1f; 计算机网络的结构 数据交换之电路交换 数据交换之报文交换和分组交换 系列文章目录题目解答 题目 在下图所示的采用“存储-转发”方式的分组交换网络中所有链路的数据传输速率为100 Mbps&#xff0c;分…...

JVS-rules规则引擎,解决大数据风控的自动化决策利器

规则引擎中的评分卡节点是一种用于评估客户信用、风险等级或其他指标的重要工具。它通常用于金融、信贷等领域&#xff0c;以便根据一系列预定义的规则和权重来对客户进行评分。以下是评分卡节点的主要功能、作用以及配置方式的介绍&#xff1a; 功能和作用&#xff1a; 评估…...

dvaJs在react 项目中的简单使用

官网&#xff1a;入门课 | DvaJS 备注&#xff1a;个人学习 代码示例&#xff1a; getColumns.js const getColumns [{title: 姓名, // 列标题dataIndex: name, // 数据字段名称&#xff0c;与数据中的字段名对应key: name, // 列的唯一键},{title: 年龄, // 列标题dataIn…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

在Ubuntu中设置开机自动运行(sudo)指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

select、poll、epoll 与 Reactor 模式

在高并发网络编程领域&#xff0c;高效处理大量连接和 I/O 事件是系统性能的关键。select、poll、epoll 作为 I/O 多路复用技术的代表&#xff0c;以及基于它们实现的 Reactor 模式&#xff0c;为开发者提供了强大的工具。本文将深入探讨这些技术的底层原理、优缺点。​ 一、I…...