标签：vue admin element clipboard 复制 使用 js event
之前研究点击按钮复制的时候自己用的clipboard方法（vue/js实现点击按钮复制的功能（使用clipboard不再使用过时的execCommand））
在使用vue-element-admin时发现其已经有二次封装过的复制方法了，于是记录一下，并解析一下他是如何封装的。
首先附上官方文档的链接：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/clipboard.html
他封装成为了两种方法，分别是直接使用和指令方式使用。
1、直接使用
直接使用需要在文件中引入clip方法
import clip from '@/utils/clipboard' // use clipboard directly
clip（text,event） 函数接收两个必须的参数，text为复制的内容，event为事件（一般为@click事件中传入的事件对象$event）
————————————————————————————————————————————————————————
打开 @/utils/clipboard 文件，可以看到其默认输出为 handleClipboard(text, event) 函数，也就是上面使用的clip函数。
同时文件中还定义了，两个同来提示信息的函数， clipboardSuccess() 和 clipboardError() ，分别对应复制成功和复制失败。
其中提示函数中用的提示方法为 Vue.prototype.$message ，其实也就是平常在.vue文件中使用的 this.$message 。
然后重点来了，他从clipboard组件中引用了一个名为Clipboard的构造函数， import Clipboard from 'clipboard' 。
handleClipboard(text, event)的内部就是在使用这个构造函数的方法，例如.on和.onClick
————————————————————————————————————————————————————————
打开这个组件的js（文件位置：/node_modules\clipboard\dist\clipboard.js。官方文档：https://clipboardjs.com/）
然后，，，然后，我就看不懂了。
2、指令方式使用
文件中需要引入clipoard指令，
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
directives: {
clipboard
},
使用样例： <el-button v-clipboard:copy='inputData' v-clipboard:success='clipboardSuccess'>copy</el-button>
其中 v-clipboard:copy 为复制的内容， v-clipboard:success 为成功之后的回调。
————————————————————————————————————————————————————————
打开src\directive\clipboard\clipboard.js可以看到第一步还是先引用了clipboard组件中名为Clipboard的构造函数
然后默认返回一个对象，也就是vue的自定义指令。
然后，，，然后，其中对Clipboard的使用又看不懂了。
标签：vue,admin,element,clipboard,复制,使用,js,event 来源： https://www.cnblogs.com/MingYX/p/16358763.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。