当前位置： 移动技术网 > IT编程>开发语言>JavaScript > VUE 实现复制内容到剪贴板功能

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

2019年04月24日  | 移动技术网IT编程  | 我要评论

注： 依赖第三方插件 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("抱歉，复制失败！")
}

 

四、效果图

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网