vue3自定义指令

根目录创建如下目录

 指令.ts

/**
 * 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 scrollMouse: 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 scrollMouse;
 

index.ts

import { App } from "vue";
import scrollMouse from "./modules/scrollMouse";


const directivesList: any = {
	// Custom directives
	scrollMouse,
};

const directives = {
	install: function (app: App<Element>) {
		Object.keys(directivesList).forEach(key => {
			// 注册所有自定义指令
			app.directive(key, directivesList[key]);
		});
	}
};

export default directives;

main.ts

import directives from './directives/index'
app.use(directives)