在前端開發項目中，很多時候有那么一個場景，就是要求將一段文案復制下來，這段文案可能是一串很長的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模板界面代碼如下：
<template><div class="home"><div class="top">js-tool-big-box</div><div class="top top2">做更豐富的前端JS工具庫</div><div class="div-box">copy處：<input type="text" v-model="form.copyVal" /></div><el-button type="primary" @click="go2Copy()">復制一下</el-button><div class="div-box">paste處：<input type="text" v-model="form.pasteVal" /></div></div>
</template>2.3? 使用Vue3定義數據依賴
如果你剛剛使用Vue3不久，總會難以想起Vue3如何定義數據依賴，就像上午還在做Vue項目用兩個大括號綁定變量數據，突然下午開始做React項目，寫上兩個大括號就報錯一樣。這里我們引入reactive，然后定義兩個輸入框的數據依賴。
<script setup>import { reactive } from "vue";import { ElMessage } from 'element-plus'const form = reactive({copyVal: '',pasteVal: ''})
</script>2.4 引入js-tool-big-box工具庫，實現復制功能?
首先安裝js-tool-big-box工具庫
執行命令npm i?js-tool-big-box
項目中引入工具庫，同時工具庫對外提供了dataBox對象，用于復制文字到剪貼板的功能。引入代碼如下：
import { dataBox } from 'js-tool-big-box';接下來就可以開始實現功能調用了，上面的模板處，我們點擊按鈕，會執行一個go2Copy方法，這里來實現一下：
const go2Copy =() =>{const text = form.copyVal;dataBox.copyText(text, () => {ElMessage({type: 'success',message: '復制成功'})}, () => {ElMessage({type: 'error',message: '復制異常，請嘗試其他方式復制內容'})})}
?
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，減少冗余的公共方法。你有更多的時間去做業務開發，有更多的思路去提升你們產品的用戶體驗，那個時候，希望你可以在團隊中越來越游刃有余吧。
我在文章末尾加了投票環節，希望得到你寶貴的一票哦！
)
