基于Vue3+ElementPlus项目，复制文字到剪贴板功能实践指南，揭秘利用js-too ...

在前端开发项目中，很多时候有那么一个场景，就是要求将一段文案复制下来，这段文案可能是一串很长的id，可能是一条下令语句，可能是一小段文案，复制到剪贴板上。如许有利于用户复制到其他地方去，使得用户操纵起来更便捷。
  目次
1 媒介 
2 基于Vue3+ElementPlus项目来利用工具
2.1 实现素材
2.2 界说界面 
2.3  利用Vue3界说数据依赖
2.4 引入js-tool-big-box工具库，实现复制功能 
2.5 方法说明
3 利用js-tool-big-box工具库的好处
3.1 说明文档的与众不同
3.2 现在已有的工具方法 
3.3 利用js-tool-big-box的好处 
4 末了

---

1 媒介 

所以提到copy-to-clipboard大家肯定不陌生，这个工具很方便，利用起来也很简朴，所以我就想，js-tool-big-box这个工具库，如果把这个功能添加进去，肯定能更资助更多的前端小伙伴们，说干就干，下面我们说一下js-tool-big-box这个工具库，怎样利用复制文字到剪贴板的功能。
2 基于Vue3+ElementPlus项目来利用工具

2.1 实现素材

这一末节解说的实现素材包括：
   

• 启动Vue3项目，主要利用到reactive界说数据依赖；
  
• 安装ElementPlus，主要用到ElMessage和el-button组件功能；
  
• 安装js-tool-big-box，基于Vue3项目利用其复制文字到剪贴板功能。
  

  2.2 界说界面 

起首，我们希望界说一个模板界面，界面中有两个输入框，第一个可以随意输入文字，然后添加按钮，点击按钮实现复制文字到剪贴板功能，然后我们手动执行粘贴，可以将第一个输入框的文字复制到第二个输入框中，算是大功告成。Vue3模板界面代码如下：

1. <template>
2.   <div class="home">
3.     <div class="top">js-tool-big-box</div>
4.     <div class="top top2">做更丰富的前端JS工具库</div>
5.     <div class="div-box">
6.       copy处：<input type="text" v-model="form.copyVal" />
7.     </div>
8.     <el-button type="primary" @click="go2Copy()">复制一下</el-button>
9.     <div class="div-box">
10.       paste处：<input type="text" v-model="form.pasteVal" />
11.     </div>
12.   </div>
13. </template>

复制代码

2.3  利用Vue3界说数据依赖

如果你刚刚利用Vue3不久，总会难以想起Vue3怎样界说数据依赖，就像上午还在做Vue项目用两个大括号绑定变量数据，突然下战书开始做React项目，写上两个大括号就报错一样。这里我们引入reactive，然后界说两个输入框的数据依赖。

1. <script setup>
2.   import { reactive } from "vue";
3.   import { ElMessage } from 'element-plus'
5.   const form = reactive({
6.     copyVal: '',
7.     pasteVal: ''
8.   })
9. </script>

复制代码

2.4 引入js-tool-big-box工具库，实现复制功能 

起首安装js-tool-big-box工具库
   执行下令npm i js-tool-big-box
  项目中引入工具库，同时工具库对外提供了dataBox对象，用于复制文字到剪贴板的功能。引入代码如下：

1. import { dataBox } from 'js-tool-big-box';

复制代码

接下来就可以开始实现功能调用了，上面的模板处，我们点击按钮，会执行一个go2Copy方法，这里来实现一下：

1. const go2Copy =() =>{
2.     const text = form.copyVal;
3.       dataBox.copyText(text, () => {
4.         ElMessage({
5.             type: 'success',
6.             message: '复制成功'
7.         })
8.       }, () => {
9.         ElMessage({
10.             type: 'error',
11.             message: '复制异常，请尝试其他方式复制内容'
12.         })
13.       }
14.     )
15.   }

复制代码

2.5 方法说明

 工具利用起来很便捷，通过对外提供的dataBox对象，调用copyText方法，就可以实现功能。方法利用总结如下：

方法名	返回值	入参
copyText	--	第一个参数必填，表示必要复制到剪贴板的文字； 第二个参数非必填，为一个回调函数，表示复制乐成后的回调函数； 第三个参数非必填，为一个回调函数，表示复制失败后的回调函数；

其实我倒是以为，回调函数还是很有须要的，毕竟前端javascript调用浏览器，再调用操纵系统的功能是必要肯定时间的，而前端开发同学为了很好的用户体验，很多时候是必要给用户一些页面上的提示的。例如弹出一个toast提示，例如将复制按钮变动一下，例如其他地方给一个提示，总之给用户提示的方式多种多样，但这个回调函数，还是应该有的，而且很须要。
3 利用js-tool-big-box工具库的好处

3.1 说明文档的与众不同

从学习java的时候，到厥后的jquery等工具api的时候，会有一个小工具，我也想过是否做一个小工具，或者单独起一个网址，又或者将说明文档写到项目的readme里，又或者是写到npm的谁人先容里。厥后我发现，我还是更喜欢文章形式，文章就会有本身更多的发挥空间，可以和大家聊聊天，可以在批评中接受更多的消息，所以我同一将说明文档写到了csdn的博客中。后续的方法继续加，专栏博客就会继续累加。

3.2 现在已有的工具方法 

 现在我已经根据本身以往的经验，将一些利用频率非常高的功能糅合了进去，后续还会继续累加，并根据大家的反映，提供更多的功能进去，现在已有的功能如下：

3.3 利用js-tool-big-box的好处 

你在前端开发项目中，是否碰到过如许的题目呢？比如我们在开发过程中，几个业务场景都必要的方法，就不但独实现了，写到一个公共的目次下，大家共同调用；比如本身难以实现的功能，去网上找一找，安装引入，大家开始利用；甚至有时候，有的同事比较独特，你引入了，我也要单独写一遍，本身用；另有时候，有人本身安装了了一个第三方库，然后没有告诉一起开发的同事，导致项目起不来，然后才开始问，哦，原来必要安装一下。
其实这些题目或者场景，我都碰到过。所以我希望js-tool-big-box可以越来越丰富，越来越满足大家的日常需求。大家可以少写一些公共方法，直接利用这个工具库。况且大家最浪费时间或者最核心的是业务功能，又不是这个工具库，也不必担心利用了工具库，或是那些AI人工智能一样，哪天本身的业务本领被取代了。大家可以把更多的时间用于本身的核心业务开发中去。
利用了这个工具库以后呢，也是希望大家可以淘汰一些第三方库的安装，如许package.json会少一些内容，也可以淘汰因为安装而引起的团队沟通困扰。
4 末了

末了呢，希望大家有一些想法可以批评区告诉我，或者私信告诉我，我希望我们可以为这个工具库添砖加瓦，让他变得越来越丰富，希望可以真正资助开发者们淘汰install，淘汰冗余的公共方法。你有更多的时间去做业务开发，有更多的思绪去提拔你们产品的用户体验，谁人时候，希望你可以在团队中越来越游刃有余吧。
我在文章末尾加了投票环节，希望得到你名贵的一票哦！


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。