VUE 实现复制内容到剪贴板功能

注：依赖第三方插件 clipboard

一、安装插件

npm install vue-clipboard2 --save

二、全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

三、使用

<ul class="file-list">
  <li v-for="(f, index) of files" :key="index">
    <span>[文件{{index + 1}}] {{f}}</span>
    <span class="copy-btn" v-clipboard:copy="f" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
  </li>
</ul>

// 复制成功时的回调函数
onCopy (e) {
   this.$message.success("内容已复制到剪切板！")
},
// 复制失败时的回调函数
onError (e) {
   this.$message.error("抱歉，复制失败！")
}

四、效果图

版权声明：本文来源博客园，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://www.cnblogs.com/similar/p/10757540.html
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2019-11-17 16:36:11
阅读 ( 1304 )
分类：前端

VUE 实现复制内容到剪贴板功能

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看