VUE将内容复制到剪贴板(两种使用方法)

插件‘vue-clipboard 2’用于将内容复制到剪贴板，通过官方文档有两种使用方式。

第一种方法类似于大多数文章，只是粘贴代码：

template div class='container '输入类型='text' v-model='message' button类型=' button ' v-clipboard : copy=' message ' v-clipboard : success=' OnCopy ' v-clipboard : error=' OnError ' copy！/button /div/templatescript导出默认{ data(){ return { message : ' Copy this Text '，} }，methods : { oncopy : function(e){ alert('您刚刚复制了： ' e.text) }，On error : function(e){ console . log(e)alert('复制文本失败')}/script直接将变量内容复制到剪贴板，但是在复制之前没有办法处理数据，所以需要第二种方式

第二种方式：

template div class='container '输入类型='text' v-model='message '按钮类型='button' @click='doCopy('add me！)‘收到！/button /div/templatescript导出默认{ data(){ return { message : ' Copy this Text ' } }，methods : { data processing(val){ this . message=this . message ' ' val }，docopy : function(val){ this . data processing(val)this。$copyText(this.message)。然后(function (e) { alert(' copy ')console . log(e)}，Function(e){ alert('无法复制')console . log(e)})}/script从这个示例代码中，我们可以看到复制操作使用了VUE响应函数，这使得在复制之前控制数据成为可能！

让我们看看vue将内容复制到剪贴板的功能，如下所示。

注意：依赖第三方插件剪贴板

首先，安装插件

npm安装vue-剪贴板2 -保存

第二，全局注入(main.js)

从“vue-剪贴板2”vue导入vue剪贴板。使用(vue剪贴板)iii。使用

ul class='file-list' li v-for='(f，Index)of file ' : key=' Index ' Span[file { { Index 1 } }]{ { f } }/Span class=' copy-BTN ' v-剪贴板： copy=' f ' v-剪贴板3360 success=' oncopy ' v-剪贴板3360错误=' onerror' copy /span /li/ul//回调函数oncopy (e) {this。$ )}，//回调函数onError (e) {this。$message.error('抱歉，复制失败！')}四。翻译

摘要

以上是边肖介绍的将内容复制到剪贴板的功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！