vue3 + ts 防抖指令,节流指令,复制指令

vue3 + ts 自定义指令 防抖指令,节流指令,复制指令

  1. 本文使用了 element-ui , element-plus 官网

  2. 源文件 https://admin.spicyboy.cn/#/directives/debounceDirect

  3. 在这里插入图片描述

  4. 新建 copy.ts 文件 (复制指令)

import type { Directive, DirectiveBinding } from "vue";
import { ElMessage } from "element-plus";
interface ElType extends HTMLElement {copyData: string | number;__handleClick__: any;
}
const copy: Directive = {mounted(el: ElType, binding: DirectiveBinding) {el.copyData = binding.value;el.addEventListener("click", handleClick);},updated(el: ElType, binding: DirectiveBinding) {el.copyData = binding.value;},beforeUnmount(el: ElType) {el.removeEventListener("click", el.__handleClick__);}
};async function handleClick(this: any) {try {await navigator.clipboard.writeText(this.copyData);} catch (err) {console.error('复制失败');}ElMessage({type: "success",message: "复制成功"});
}export default copy;
  1. 新建 debounce.ts 文件 (防抖指令)
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {__handleClick__: () => any;
}
const debounce: Directive = {mounted(el: ElType, binding: DirectiveBinding) {if (typeof binding.value !== "function") {throw "callback must be a function";}let timer: number | null = null;el.__handleClick__ = function () {if (timer) {clearInterval(timer);}timer = setTimeout(() => {binding.value();}, 500);};el.addEventListener("click", el.__handleClick__);},beforeUnmount(el: ElType) {el.removeEventListener("click", el.__handleClick__);}
};export default debounce;
  1. 新建 throttle.ts 文件 (节流指令)
import type { Directive, DirectiveBinding } from "vue";
interface ElType extends HTMLElement {__handleClick__: () => any;disabled: boolean;
}
const throttle: Directive = {mounted(el: ElType, binding: DirectiveBinding) {if (typeof binding.value !== "function") {throw "callback must be a function";}let timer: number | null = null;el.__handleClick__ = function () {if (timer) {clearTimeout(timer);}if (!el.disabled) {el.disabled = true;binding.value();timer = setTimeout(() => {el.disabled = false;}, 1000);}};el.addEventListener("click", el.__handleClick__);},beforeUnmount(el: ElType) {el.removeEventListener("click", el.__handleClick__);}
};export default throttle;
  1. 新建 index.ts 文件
import { App, Directive } from "vue";
import copy from "./modules/copy";
import debounce from "./modules/debounce";
import throttle from "./modules/throttle";const directivesList: { [key: string]: Directive } = {copy,debounce,throttle,
};const directives = {install: function (app: App<Element>) {Object.keys(directivesList).forEach(key => {app.directive(key, directivesList[key]);});}
};export default directives;
  1. 在‘main.ts 中引入index 文件
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import directives from "@/components/directives/index";  // 在此处引入指令
const app = createApp(App)
app.use(store)
app.use(directives)  // 注册
app.use(router) 
app.use(ElementPlus)
app.mount("#app");
  1. 指令使用
<template><div class="card content-box" style="margin-top:30px"><span class="text">防抖指令</span><el-button v-debounce="debounceClick" type="primary">防抖按钮 (0.5秒后执行)</el-button></div><div class="card content-box" style="margin-top:30px"><span class="text">节流指令</span><el-button v-throttle="throttleClick" type="primary">节流按钮 (每隔1S秒后执行)</el-button></div><div style="margin-top:30px"><el-button  v-copy="message">复制指令</el-button></div>
</template><script setup lang="ts" name="debounceDirect">
import { ElMessage } from "element-plus";
import { ref } from "vue";
const message = ref('这是复制指令')
const debounceClick = () => {console.log(11111111111);ElMessage.success("我是防抖按钮触发的事件");
};
const throttleClick = () => {console.log(2222222222222);ElMessage.success("我是节流按钮触发的事件");
};
</script>

在这里插入图片描述

  1. 搞定!

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

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

相关文章

12.6每日一题(备战蓝桥杯程序的控制结构)

12.6每日一题&#xff08;备战蓝桥杯程序的控制结构&#xff09; 题目 1638: 【入门】判断正负数或零题目描述输入输出样例输入样例输出来源/分类 题解 1638: 【入门】判断正负数或零题目 1348: 【入门】求绝对值题目描述输入输出样例输入样例输出来源/分类 题解 1348: 【入门】…

【Qt开发流程】之2D绘图2:坐标系统

概述 Qt的坐标系统由QPainter类控制。QPainter与QPaintDevice和QPaintEngine 类一起构成了Qt的绘画系统的基础。QPainter用于执行绘图操作&#xff0c;QPaintDevice是一个二维空间的抽象&#xff0c;可以使用QPainter在其上绘制&#xff0c;QPaintEngine 提供了QPainter用于在…

C语言中的柔性数组

uint8_t data[0];代码的含义老虎开始对这个数组不太了解&#xff0c;查阅后得知这是个柔性数组。 C语言中的柔性数组&#xff08;Flexible Array Member&#xff09;是一种特殊的数组&#xff0c;它被定义在结构体的最后一个元素中&#xff0c;其大小未知&#xff0c;也就是所…

Crow:黑魔法new_rule_tagged实现模板参数的绑定

Crow添加路由的定义: #define CROW_ROUTE(app, url) app.template route<crow::black_magic::get_parameter_tag(url)>(url) Crow:黑魔法get_parameter_tag-CSDN博客 介绍了get_parameter_tag的作用 route的定义为: auto route(std::string&& rule) -> …

java--Stream流常见的中间方法和终结方法

1.Stream流常见的中间方法 中间方法指的是调用完成后会返回新的Stream流&#xff0c;可以继续使用(支持链式编程) 2.Stream流常见的终结方法 ①终结方法指的是调用完成后&#xff0c;不会返回新Stream了&#xff0c;没法继续使用流了。 ②收集Stream流&#xff1a;就是把Stre…

MySQL执行流程_执行一条select语句,期间发生了什么

文章目录 执行一条select语句&#xff0c;期间发生了什么MySQL执行流程第一步&#xff1a;连接器第二步&#xff1a;查询缓存第三步&#xff1a;解析SQL第四步&#xff1a;执行SQL 执行一条select语句&#xff0c;期间发生了什么 MySQL执行流程 server层负责建立连接、分析和执…

SpringAMQP

目录 利用SpringAMQP实现HelloWorld中的基础消息队列功能: 1&#xff0e;在父工程中引入spring-amqp的依赖 2&#xff0e;在publisher服务中利用RabbitTemplate发送消息到simple.queue这个队列 3&#xff0e;在consumer服务中编写消费逻辑&#xff0c;绑定simple.queue这个…

Python Bokeh库详解:交互式数据可视化

更多资料获取 &#x1f4da; 个人网站&#xff1a;ipengtao.com 数据可视化在数据分析和科学研究中起着至关重要的作用。而Bokeh&#xff08;发音为“bo-kay”&#xff09;是一个强大的Python交互式可视化库&#xff0c;提供了丰富的工具和功能&#xff0c;使得创建交互式、吸…

西工大网络空间安全学院计算机系统基础实验二(phase_3,phase_4,phase_5)

大家千万不要着急&#xff0c;不要慌张&#xff0c;即使自己并不了解多少汇编代码的知识&#xff0c;即使自己计基课上的基础知识学的并不扎实&#xff0c;也都不要紧&#xff0c;因为这次计基实验考察的重点并不是基础知识&#xff0c;而是对gdb工具的掌握&#xff0c;以及心细…

基于.NET Core + Quartz.NET+ Vue + IView开箱即用的定时任务UI

前言 定时任务调度应该是平时业务开发中比较常见的需求&#xff0c;比如说微信文章定时发布、定时更新某一个业务状态、定时删除一些冗余数据等等。今天给大家推荐一个基于.NET Core Quartz.NET Vue IView开箱即用的定时任务UI&#xff08;不依赖数据库,只需在界面做简单配…

Spring Boot学习随笔- 集成JSP模板(配置视图解析器)、整合Mybatis(@MapperScan注解的使用)

学习视频&#xff1a;【编程不良人】2021年SpringBoot最新最全教程 第五章、JSP模板集成 5.1 引入JSP依赖 <!--引入jsp解析依赖--> <!--C标签库--> <dependency><groupId>jstl</groupId><artifactId>jstl</artifactId><version&…

第二十一章网络通信

网络程序设计基础 局域网与互联网 为了实现两台计算机的通信&#xff0c;必须用一个网络线路连接两台计算机。如下图所示 网络协议 1.IP协议 IP是Internet Protocol的简称&#xff0c;是一种网络协议。Internet 网络采用的协议是TCP/IP协议&#xff0c;其全称是Transmissio…

人工智能应用专栏----专栏介绍

文章目录 本专栏主要记录人工智能的应用方面的内容&#xff0c;包括chatGPT、AI绘图等等&#xff1b; 订阅后可私聊我获取 《从零注册并登录使用ChatGPT》 《从零开始使用chatGPT的API&#xff1b;通过chatgpt-next-web部署自己chatGPT web网页&#xff1b;无需翻墙&#xff0c…

求矩阵各行元素之和

本题要求编写程序&#xff0c;求一个给定的mn矩阵各行元素之和。 输入格式&#xff1a; 输入第一行给出两个正整数m和n&#xff08;1≤m,n≤6&#xff09;。随后m行&#xff0c;每行给出n个整数&#xff0c;其间 以空格分隔。 输出格式&#xff1a; 每行输出对应矩阵行元素…

java系列-LinkedHashMap

1.插入新节点时&#xff0c;会将该节点加到链表尾部 public class LinkedHashMap<K,V> extends HashMap<K,V> implements Map<K,V>{/*** The head (eldest) of the doubly linked list.*/transient LinkedHashMapEntry<K,V> head;/*** The tail (young…

【小红书运营指南2】小红书自律标签的达人分解

小红书标签的达人分解 写在最前面11.27初步想法达人分析 标签拆解&#xff08;速览版&#xff09;分析应用 思路 相关标签拆解&#xff08;详细版&#xff09;11、职场-职场干货 文化薯&#xff08;创业&#xff0c;也是专注知识付费&#xff0c;可以对标学习&#xff09;笔记画…

用modelbox server启动流程图,暴露Restful接口

背景 假设你已经搭建了modelbox开发容器&#xff0c;能够使用webUI构建流程图。如果没有请参考昇腾npu上构建modelbox webUI开发容器教程。 现在&#xff0c;本文会说明&#xff0c;如何在终端用命令的方式将流程图暴露为服务&#xff0c;并能够在本地用postman访问。 本文参…

华为OD机试三(完全二叉树部分后续遍历、猜密码、五子棋谜)

1. 完全二叉树部分后续遍历 题目表述&#xff1a;输入&#xff1a; 1 2 3 4 5 6 7 输出&#xff1a; 2 3 1 示例代码&#xff1a; # 测试数据 test_data [1,2,3,4,5,6,7] # 找出非叶子节点 new_list [] for i in test_data:left 2 * iright left 1if left in test_data…

codeforces D - Trees and Segments

思路 因为涉及到 l 0 l_0 l0​ 最大连续长度和 l 1 l_1 l1​ 最大连续长度&#xff0c;考虑枚举 l 1 l_1 l1​ 的长度 d p l 0 dp\;l_0 dpl0​ 的长度。 m a x 0 p r e f [ i ] [ c n t ] max0pref[i][cnt] max0pref[i][cnt] 表示以 i − 1 i-1 i−1 结尾的 l 0 l_0 l0​…