在vue3中使用自定义指令

目录构建

直接看图

模块化规范

我们在directives文件夹下书写指令,例如 copy.ts
并暴露注册这个指令的方法

// copy.ts
 const copyDirective = {mounted(){},updated(){},...
 }// 暴露注册指令的方法
 export function setCopyDrective(app) {app.directive("copy", copyDirective);
 }
 

在入口文件index.ts中:
引入每个指令的注册方法,并暴露一个注册所有指令的方法

// index.ts
 import type { App } from "vue";
 import { setCopyDrective } from "./copy";export function setDirectives(app: App) {// 加载需要的指令setCopyDrective(app);
 }
 

我们要在项目初始化的时候就自动注册所有自定义指令,所以在main.js中引入注册所有指令的方法并使用:

// main.js
 import { createApp } from "vue";
 import App from "./App.vue";
 import { setDirectives } from "./directives";const app = createApp(App);// 注册所有自定义指令
 setDirectives(app);app.mount("#app");
 

v-copy的实现 – 复制到剪贴板

例子来自:

作者：橙某人
链接：https://juejin.cn/post/6968996649515515917
来源：稀土掘金

笔者实现的是复制input框中的文本，和原文略有不同：

copy.ts

// import type { App, Directive, DirectiveBinding } from "vue";const copyDirective = {mounted(el, binding) {el.target = binding.value;el.addEventListener("click", () => {// 创建 textarea 元素const textarea = document.createElement("textarea");// 移出视野textarea.style.position = "fixed";textarea.style.top = "-99999px";// 插入 DOMdocument.body.appendChild(textarea);// 定义值textarea.value = el.target;// 自动选中文本  用于复制的 API 只能复制选中的值textarea.select();// 浏览器复制 API 显示废弃的原因是没有纳入标准 但仍被各大主流浏览器支持const res = document.execCommand("Copy");res && console.log(`success: ${el.target}`);// 移除 textareadocument.body.removeChild(textarea);});},updated(el, binding) {// 实时更新内容el.target = binding.value;},
 };export function setCopyDrective(app) {app.directive("copy", copyDirective);
 }
 

以上！