前言
前面的文章中我们已经对vue2和vue3中自定义指令的语法和钩子函数分别做了梳理和介绍。光说不练假把式，接下来我们就来实战一下，同时也看一看一线大厂们常用的自定义指令有哪些。今天要实战的是自动复制文本到剪切板的自定义指令。
不知道小伙伴们有没有遇到过这样的情况，当我的鼠标去点击一个文本的时候，这个文本就会自动复制到了剪切板里了，然后就可以想往哪粘就往哪粘了，妈妈再也不用担心我的复制粘贴了。言归正传，下面我们将以vue3.0为例来分析和实现一下自动复制功能
思路分析
要想实现文本的自动复制，我们需要借助原生js的 document.execCommand(“Copy”)来实现，但是此方法有一个局限性，那就是只能复制文本框input或多行文本textarea中的文本内容，所以要想实现自由复制避免不了借助input或textarea来实现。
- 要实现点击复制，首先我们应该给要点击的元素绑定一个click事件，并在该点击事件中动态的创建一个textarea，用于保存当前元素中的文本内容（因为前面说过document.execCommand(‘Copy’)只能复制input或textarea中的文本）。这些操作可以放在beforeMount钩子函数中，对应2.0的是bind函数。
- 另外我们创建的这个textarea只是作为一个中介的作用，而并不是实际的业务组件，所以新创建的textarea不应该显示在页面上的，需要隐藏掉（需要注意的是不能用display=none隐藏，因为这种隐藏依然无法复制，可以使用opacity=0来实现）。完成复制后再把该textarea删除掉。
- 另外还需考虑当元素的数据更新的时候，我们要复制的值也同样是需要更新的，这一步可以在updated钩子函数中实现，对应2.0中的componentUpdate函数。
- 最后我们对元素添加的click事件，当指令解绑时还需把对应的事件删除。这一步可以在unmounted钩子中实现，对应2.0中的unbind
基本思路已经分析完了，下面我就来用代码实现一下
自定义指令v-copy代码实现
const app = createApp();
app.directive('copy',{
beforeMount(el,binding){
//先给el元素挂上2个自定义属性，因为el是每个钩子函数都能访问到的
//一个是$value用于存放要复制的文本，另一个$handle用于定义click事件回调函数（因为在其它钩子函数中还需要删除该事件）
el.$value = binding.value;
el.$handle=function(){
if(!el.$value) return;//如果文本为空不做任何操作
let textarea = document.createElement('textarea');
textarea.value = el.$value;
textarea.style.cssText('opacity:0;position:fixed;left:-999px');//隐藏textarea
document.body.appendChild(textarea);
textarea.select();//让文本全部选中
let copyText = document.execCommand('Copy');
document.body.removeChild(textarea);//复制完成后删除创建的textarea
}
el.addEventListener('click',el.$handle);
},
updated(el,binding){
el.$value = binding.value;//数据变化后重新赋值
},
unmounted(el){
el.removeEventListener('click', el.$handle);//移除点击事件
}
});
总结
以上便实现了一个简单的复制自定义指令。喜欢的小伙伴欢迎点赞留言加关注哦！