vue移动端H5页面复制邀请码（clipboard插件以及document.execCommand）

一.clipboard插件

官网链接：https://clipboardjs.com/

1.安装

（1）方法1：引入clipboard.js插件

（2）方法2：使用npm

npm install clipboard --save
或
npm install clipboard.js --save-dev

2.引入

如果是vue文件，只需要在相关的组件中进行clipboard.js导入即可。

import Clipboard from "clipboard";

3.使用

（1）从属性复制文本

使用button绑定data-clipboard-text属性

（2）从另一个元素复制文本

一个很常见的用例是从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能。

这个属性的值就是能匹配到另一个元素的选择器。

（3）从另一个元素剪切文本

此外，你可以定义一个 data-clipboard-action 属性来指明你想要复制（copy）还是剪切（cut）内容。

如果你省略这个属性，则默认为复制（copy）。

注意：剪切（cut）动作只在 <input> 或 <textarea> 元素起作用。

（4）注意点

这个插件复制的对象必须是input 或者 textarea 里面的值。所以说你要是想复制p标签或者其他文本 必须先设置一个input或者textarea作为中间过渡。html中写一个textarea标签，样式设置： opacity:0; z-index=-1;这样就可使隐藏这个没用的容器。

二.document.execCommand

三.复制邀请码方法（2种）

3.在vue中使用遇到问题

问题:第一次点击无效，第二次才会复制，同时监听时，点击次数增加，回调调用数增加

原因：在button上绑定事件，点击后第一次才创建clipboard绑定按钮和事件，同时随着点击次数增加，创建clipboard的数量也增加。

解决：去掉button上绑定的事件，在页面初始化并拿到数据后执行一次事件，创建clipboard绑定按钮和事件即可。