vue复制功能 clipboard ，原生复制execCommand("Copy")

项目开发中用到一键复制，只是一处用到复制功能，所以直接用的原生方法做的复制
第一种：原生方法：
原生是通过给body添加input绑定的内容添加到剪切板实现复制
但是复制成功以后要把多余的input删除

据说贴图的最不负责只好把源码发出来了
html：

js：
const input = document.createElement(“input”);
document.body.appendChild(input);
input.setAttribute(“value”, “********”);
input.select();
if (document.execCommand(“copy”)) {
document.execCommand(“copy”);
Toast(‘复制成功’);
}
document.body.removeChild(input);

因为不是大量使用复制功能所以就没有引插件，据说原生方法兼容不好，所以就看了一下vue的插件clipboard，都说它很牛什么都能复制，但是我只用复制文本啊，其他功能以后再琢磨，后期更新

第二种方法：clipboard

首先要：cnpm install clipboard -S一下下，npm也行哈
当然也可以引cdn的方法千千万，你喜欢的就是最好的我就不说了，
然后在main.js中引入

可能有的人直接就Vue.use()了，
开始我也是这样的，它会很友好的提示你

但是你如果换成Vue.prototype的时候就不会出现这个问题
虽然Vue.use()根本上也是给Vue.prototype上添加属性但是你不这样写就是会报错，

查了一下别人说什么三点：

1. 不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式
2. 非vue官方库不支持new Vue()方式
3. 每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法。

不扯那么多了，上边安装好以后就可以在页面中使用了，

看好input的ID和button的data-clipboard-target是对应的

还是直接贴源码亲民
html:
<button
ref=“copy”
data-clipboard-action=“copy”
data-clipboard-target="#success_form_input"
@click=“copyLink”
>复制

js: let clipboard = this.copyBtn;
clipboard.on(“success”, function() {
console.log(‘复制成功！’)
});
clipboard.on(“error”, function() {

  });

上边方式发现在iphone6中无法复制，添加另一种，和第一种相似

var input = document.createElement(“input”);
input.value = “this.data.orderNo”;
document.body.appendChild(input);
input.select();
input.setSelectionRange(0, input.value.length),
document.execCommand(“Copy”);
document.body.removeChild(input);
Toast(“已复制订单编号”)

有不对的地方还望大家伙多多指教，互相学习，互相进步