vue-element-admin 的复制方法

之前研究点击按钮复制的时候自己用的clipboard方法（vue/js实现点击按钮复制的功能（使用clipboard不再使用过时的execCommand））

在使用vue-element-admin时发现其已经有二次封装过的复制方法了，于是记录一下，并解析一下他是如何封装的。

首先附上官方文档的链接：https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/clipboard.html

他封装成为了两种方法，分别是直接使用和指令方式使用。

需要注意的是可能有错误：TypeError: navigator.clipboard is undefined

这个问题由于新版浏览器的安全策略，clipboard只有在安全域名下才可以访问，http域名下会显示undefined，但使用https开头的域名，或localhost，就可以访问navigator.clipboard。

这种情况可以考虑使用document.execCommand。具体内容可以看第一行的链接。

---

 

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的使用又看不懂了。