vue超好用的自定义指令封装

一、指令封装

目录结构：

index.ts 统一注册

import { App, Directive } from "vue";
import auth from "./modules/auth";
import copy from "./modules/copy";
import waterMarker from "./modules/waterMarker";
import draggable from "./modules/draggable";
import debounce from "./modules/debounce";
import throttle from "./modules/throttle";
import longpress from "./modules/longpress";const directivesList: { [key: string]: Directive } = {auth,copy,waterMarker,draggable,debounce,throttle,longpress
};const directives = {install: function (app: App<Element>) {Object.keys(directivesList).forEach(key => {app.directive(key, directivesList[key]);});}
};export default directives;

记得use

二、自定义指令

1.防抖 v-debounce

/*** v-debounce* 按钮防抖指令，可自行扩展至input* 接收参数：function类型*/
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: NodeJS.Timeout | 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;

2.节流 v-throttle

/*需求：防止按钮在短时间内被多次点击，使用节流函数限制规定时间内只能点击一次。思路：1、第一次点击，立即调用方法并禁用按钮，等延迟结束再次激活按钮2、将需要触发的方法绑定在指令上使用：给 Dom 加上 v-throttle 及回调函数即可<button v-throttle="debounceClick">节流提交</button>
*/
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: NodeJS.Timeout | 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;

3.复制 v-copy

/*** v-copy* 复制某个值至剪贴板* 接收参数：string类型/Ref<string>类型/Reactive<string>类型*/
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__);}
};function handleClick(this: any) {const input = document.createElement("input");input.value = this.copyData.toLocaleString();document.body.appendChild(input);input.select();document.execCommand("Copy");document.body.removeChild(input);ElMessage({type: "success",message: "复制成功"});
}export default copy;

4.长按 v-longpress

/*** v-longpress* 长按指令，长按时触发事件*/
import type { Directive, DirectiveBinding } from "vue";const directive: Directive = {mounted(el: HTMLElement, binding: DirectiveBinding) {if (typeof binding.value !== "function") {throw "callback must be a function";}// 定义变量let pressTimer: any = null;// 创建计时器（ 2秒后执行函数 ）const start = (e: any) => {if (e.button) {if (e.type === "click" && e.button !== 0) {return;}}if (pressTimer === null) {pressTimer = setTimeout(() => {handler(e);}, 1000);}};// 取消计时器const cancel = () => {if (pressTimer !== null) {clearTimeout(pressTimer);pressTimer = null;}};// 运行函数const handler = (e: MouseEvent | TouchEvent) => {binding.value(e);};// 添加事件监听器el.addEventListener("mousedown", start);el.addEventListener("touchstart", start);// 取消计时器el.addEventListener("click", cancel);el.addEventListener("mouseout", cancel);el.addEventListener("touchend", cancel);el.addEventListener("touchcancel", cancel);}
};export default directive;

5.拖拽 v-draggable

/*需求：实现一个拖拽指令，可在父元素区域任意拖拽元素。思路：1、设置需要拖拽的元素为absolute，其父元素为relative。2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。3、鼠标移动(onmousemove)时计算每次移动的横向距离和纵向距离的变化值，并改变元素的 left 和 top 值4、鼠标松开(onmouseup)时完成一次拖拽使用：在 Dom 上加上 v-draggable 即可<div class="dialog-model" v-draggable></div>
*/
import type { Directive } from "vue";
interface ElType extends HTMLElement {parentNode: any;
}
const draggable: Directive = {mounted: function (el: ElType) {el.style.cursor = "move";el.style.position = "absolute";el.onmousedown = function (e) {let disX = e.pageX - el.offsetLeft;let disY = e.pageY - el.offsetTop;document.onmousemove = function (e) {let x = e.pageX - disX;let y = e.pageY - disY;let maxX = el.parentNode.offsetWidth - el.offsetWidth;let maxY = el.parentNode.offsetHeight - el.offsetHeight;if (x < 0) {x = 0;} else if (x > maxX) {x = maxX;}if (y < 0) {y = 0;} else if (y > maxY) {y = maxY;}el.style.left = x + "px";el.style.top = y + "px";};document.onmouseup = function () {document.onmousemove = document.onmouseup = null;};};}
};
export default draggable;

6.水印 v-waterMarker

/*需求：给整个页面添加背景水印。思路：1、使用 canvas 特性生成 base64 格式的图片文件，设置其字体大小，颜色等。2、将其设置为背景图片，从而实现页面或组件水印效果使用：设置水印文案，颜色，字体大小即可<div v-waterMarker="{text:'版权所有',textColor:'rgba(180, 180, 180, 0.4)'}"></div>
*/import type { Directive, DirectiveBinding } from "vue";
const addWaterMarker: Directive = (str: string, parentNode: any, font: any, textColor: string) => {// 水印文字，父元素，字体，文字颜色let can: HTMLCanvasElement = document.createElement("canvas");parentNode.appendChild(can);can.width = 205;can.height = 140;can.style.display = "none";let cans = can.getContext("2d") as CanvasRenderingContext2D;cans.rotate((-20 * Math.PI) / 180);cans.font = font || "16px Microsoft JhengHei";cans.fillStyle = textColor || "rgba(180, 180, 180, 0.3)";cans.textAlign = "left";cans.textBaseline = "Middle" as CanvasTextBaseline;cans.fillText(str, can.width / 10, can.height / 2);parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
};const waterMarker = {mounted(el: DirectiveBinding, binding: DirectiveBinding) {addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor);}
};export default waterMarker;

7.按钮权限 v-auth

/*** v-auth* 按钮权限指令 （根据需求而定）*/
import { useAuthStore } from "@/stores/modules/auth";
import type { Directive, DirectiveBinding } from "vue";const auth: Directive = {mounted(el: HTMLElement, binding: DirectiveBinding) {const { value } = binding;const authStore = useAuthStore();const currentPageRoles = authStore.authButtonListGet[authStore.routeName] ?? [];if (value instanceof Array && value.length) {const hasPermission = value.every(item => currentPageRoles.includes(item));if (!hasPermission) el.remove();} else {if (!currentPageRoles.includes(value)) el.remove();}}
};export default auth;

8.旋转 v-rotate

// 自定义指令，点击旋转 v-rotate
const rotate = {beforeMount(el: any) {el.addEventListener("click", function () {console.log(el.style.transform);el.style.transition = "all 0.3s";if (el.style.transform) {let str = el.style.transform;let deg = str.substring(str.indexOf("(") + 1, str.indexOf("d"));el.style.transform = `rotate(${Number(deg) + 180}deg)`;} else {el.style.transform = "rotate(180deg)";}});}
};export default rotate;

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

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

相关文章

OpenStack-train版安装之基础组件安装

OpenStack-train版安装之基础组件安装

基础组件安装 安装MariaDB&#xff08;数据库&#xff09;安装RabbitMQ&#xff08;消息队列&#xff09;安装Memcached&#xff08;缓存&#xff09; 安装MariaDB&#xff08;数据库&#xff09; 安装 # yum install mariadb mariadb-server python2-PyMySQL -y数据库配置 …
阅读更多...
Springboot2+thymeleaf+Jpa实现CRUD操作

Springboot2+thymeleaf+Jpa实现CRUD操作

1 引入pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency><groupId>org.springframework.boot</groupId><artifactId…
阅读更多...
122 - Trees on the level （UVA）

122 - Trees on the level （UVA）

题目链接如下&#xff1a; Online Judge 我的代码如下&#xff08;tot 是目前没有赋值的node数目&#xff09;&#xff1a; #include <iostream> #include <string> #include <cstdlib> #include <vector> // #define debugstruct node{int key -1…
阅读更多...
Python 打开多个文件

Python 打开多个文件

Python 打开文件使用open 打开多个文件可是使用写多个open &#xff0c;如果是2个或者3个数量很少的情况可以 写2个或者3个open 打开 with open(r"文件名1", "r", encoding"utf-8") as f1, open(r"文件名2", "r", encodi…
阅读更多...
2023年中国感应电炉产业链、产量、销量及市场规模分析[图]

2023年中国感应电炉产业链、产量、销量及市场规模分析[图]

感应电炉行业定义是指使用电磁感应原理&#xff0c;通过感应电流使金属工件在短时间内达到预定温度的工业设备。广泛应用于冶金、机械、汽车、航空、航天、船舶、电子、医疗器械等领域。 感应电炉行业产业链 资料来源&#xff1a;共研产业咨询&#xff08;共研网&#xff09; …
阅读更多...
CSS实现空心的“尖角”

CSS实现空心的“尖角”

大家好&#xff0c;我是南宫&#xff0c;来分享一个昨天解决的问题。 我记得之前刷面试题的时候&#xff0c;CSS面试题里面赫然有一题是“如何用CSS实现三角形”&#xff0c;我觉得这个问题确实很经典&#xff0c;我上的前端培训班当初就讲过。 大概思路如下&#xff1a; 先…
阅读更多...
【每周一测】Java阶段三阶段考试

【每周一测】Java阶段三阶段考试

目录 1、SpringBoot在整合RabbitMQ时需要导入的包是 2、下列关于RabbitMQ的confirm消息确认机制解释说明正确的是 3、关于SpringBoot的配置文件&#xff0c;以下说法正确的是&#xff08;&#xff09; 4、变量命名规范说法正确的是? 5、哪个关键字可以对对象加互斥锁&…
阅读更多...
优思学院｜质量管理怎样才能做好？

优思学院｜质量管理怎样才能做好？

质量管理怎样才能做好&#xff1f;这是一个好问题&#xff0c;很多人第一时间会想到建立一个稳定的质量管理体系&#xff0c;例如ISO9001&#xff0c;又或者善用QC七大手法等等&#xff0c;虽然以上这些方法都是实用和正确的&#xff0c;绝大多数企业通常最忽略的&#xff0c;其…
阅读更多...
如何设计鞋材出库入账管理系统

如何设计鞋材出库入账管理系统

如何设计鞋材出库入账管理系统 系统概述系统需求分析系统设计系统实施与测试系统上线与维护 系统概述 本系统旨在设计一个针对鞋材出库入账管理的数字化解决方案&#xff0c;以提高管理效率、降低运营成本并确保材料账目清晰。系统将结合先进的信息化技术&#xff0c;实现对鞋…
阅读更多...
备案信息一键查询：网站备案信息查询API的操作与优势

备案信息一键查询：网站备案信息查询API的操作与优势

前言 在当今数字化的时代&#xff0c;企业的在线存在至关重要。而为了确保在网络空间的法规合规性&#xff0c;了解和管理网站备案信息变得尤为重要。为了使这一过程更为高效、便捷&#xff0c;网站备案信息查询API应运而生&#xff0c;为企业提供了一种简便的方式来获取和管理…
阅读更多...
如何打造适用的MES管理系统解决方案

如何打造适用的MES管理系统解决方案

在当前的制造业领域&#xff0c;项目型生产企业面临着独特的挑战。尽管国外的大型软件公司提供了某些解决方案&#xff0c;但由于地域、文化和制度的差异&#xff0c;这些方案并不完全满足企业的实际需求。为了解决这一难题&#xff0c;我们必须以客户为中心&#xff0c;围绕他…
阅读更多...
图像处理Laplacian 算子

图像处理Laplacian 算子

在图像处理中&#xff0c;Laplacian算子是一种常用的图像处理技术&#xff0c;用于检测图像中的边缘和轮廓。OpenCV中的Laplacian算子是一种二阶微分算子&#xff0c;用于计算图像的拉普拉斯变换&#xff0c;以便突出图像中的边缘和特征。其原理是对图像进行二阶导数运算&#…
阅读更多...
docker容器内安装vim 加速

docker容器内安装vim 加速

这里要使用国内镜像源&#xff0c;有一部分镜像源目前不好使了 前后用过清华镜像镜像源&#xff08; http://mirrors.tuna.tsinghua.edu.cn/debian/ &#xff09;、163镜像源&#xff08;http://mirrors.163.com/debian/&#xff09;目前都不太行了 更换为阿里云镜像源&#…
阅读更多...
数字逻辑电路基础-时序逻辑电路之锁存器

数字逻辑电路基础-时序逻辑电路之锁存器

文章目录 一、锁存器简介二、verilog源码三、综合及仿真结果一、锁存器简介 本文介绍数字逻辑电路中一种常用的基础时序逻辑电路-锁存，顾名思义，它的功能就是将输入在控制信号有效时透明传输到输出端，当控制信号无效时，输出值保持不变。它具有记忆和存储功能。这是它区别组…
阅读更多...
一个专门针对代理IP的很认真的调研来咯！

一个专门针对代理IP的很认真的调研来咯！

参与爬虫工程师岗位服务需求调研&#xff0c;认真填写即可获得&#xff1a; 1. 美团外卖无门槛10元红包直充。 2. 企业在职工程师加送代理池1个月。https://www.wjx.cn/vm/wFjHU1l.aspx# 请认真填写哦&#xff0c;一经采纳即可获得奖励&#xff01;
阅读更多...
eventbus

eventbus

跨级通信&#xff0c;不相干的vue之间传值和调用方法 首先创建eventbus.js // src/utils/EventBus.js 文件 import Vue from vue// 向外共享 Vue 的实例对象 export default new Vue() 在传值页面导入 import { EventBus } from "/utils/EventBus.js"; 使用方式 …
阅读更多...
处理无线debug问题

处理无线debug问题

无限debug的产生 条件说明 开发者工具是打开状态 js代码中有debugger js有定时处理 setInterval(() > {(function (a) {return (function (a) {return (Function(Function(arguments[0]" a ")()))})(a)})(bugger)(de, 0, 0, (0, 0)); }, 1000); ​ #这里就…
阅读更多...
java斗牛，咋金花

java斗牛，咋金花

无聊时间&#xff0c;打发下游戏 简单说下思路 目录 1.创建牌对象 2.创建52张牌&#xff0c;不包含大小王 3.洗牌 4.发牌 1.创建牌对象 2.创建52张牌&#xff0c;不包含大小王 3.洗牌 4.发牌 /*** 扑克牌*/ public class Poker {/*** 花色*/private String cardSuits…
阅读更多...
供应链和物流的自动化新时代

供应链和物流的自动化新时代

今天&#xff0c;当大多数人想到物流自动化时&#xff0c;他们会想到设备。机器人、无人机和自主卡车运输在大家的谈话中占主导地位。全自动化仓库的视频在网上流传&#xff0c;新闻主播们为就业问题绞尽脑汁。这种炒作是不完整的&#xff0c;它错过了供应链和物流公司的机会。…
阅读更多...
Talk | PSU助理教授吴清云：AutoGen-用多智能体对话开启下一代大型语言模型应用

Talk | PSU助理教授吴清云：AutoGen-用多智能体对话开启下一代大型语言模型应用

本期为TechBeat人工智能社区第548期线上Talk&#xff01; 北京时间11月21日(周二)20:00&#xff0c;宾夕法尼亚州立大学助理教授—吴清云的Talk已准时在TechBeat人工智能社区开播&#xff01; 她与大家分享的主题是: “ AutoGen&#xff1a;用多智能体对话开启下一代大型语言模…
阅读更多...
最新文章

Copyright @ 2022~2023