vue-element-admin 的复制方法
作者:互联网
之前研究点击按钮复制的时候自己用的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