言午月月鸟 - javascript 设置内容到系统剪切板方法

> 背景： 在第三方APP投放APP下载广告（主要是Android），需要追踪引流效果。通过渠道号或者IDFA都会有一些问题导致统计丢失，如很多手机都引导用户到自己的手机市场下载。一种简单的跨平台方案是，在下载落地页设置一个自定义格式的文本追踪码到手机系统剪切板，另APP在首次启动时将该剪切码上报到自己的分析平台。

方法直接上代码；兼容 PC 浏览器、手机浏览器、内嵌webview 。
## 常规写法
示例实现了原生写法 和 引用 clipboard.js 库的写法，实现方法的本质是一样的。
```
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Untitled</title>
  </head>
<body>
<div id="content">
  <p>
    <button id="btnClip1">点击复制1</button>
  </p>
  <p>
    <button id="btnClip2" data-clipboard-text="这是clipboard.js方法复制的内容">点击复制2</button>
  </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<script>
  let rawCopyContent = function(content) {
    let copyDom = document.createElement("textarea");
    copyDom.value = content;
    copyDom.style.position = "absolute";
    copyDom.style.left = "-9999px";
    copyDom.style.top = "0px";
    document.getElementsByTagName("body")[0].appendChild(copyDom);
    let range = document.createRange();
    range.selectNode(copyDom);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
    let successful = document.execCommand('copy');
    try {
      console.log('Copy command run : ' + (successful ? "succeed" : "failed"));
    } catch(err) {
      console.log('Oops , unable to copy!');
    }
    document.getElementsByTagName("body")[0].removeChild(copyDom);
  };

document.getElementById('btnClip1').addEventListener('click', function(){
    let content = "这是原生js方法复制的内容";
	rawCopyContent(content);
  });

new ClipboardJS('#btnClip2');
</script>
</body>
</html>
```

## vue 写法
main.js （引入vue-clipboard2）：

```
import Vue from 'vue'
import App from './App.vue'
// 仅下边两句，其它上下文供参考
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')
```

App.vue 或其它需要使用的页面（v-clipboard 属性加持即可）：
```
<template>
  <div id="app">
    <button v-clipboard:copy="message" v-clipboard:success="onCopied">Copy Text</button>
  </div>
</template>

## 参考文章
[clipboard.js 中文网](http://www.clipboardjs.cn/ "clipboard.js 中文网")

[Github - vue-clipboard2](https://github.com/Inndy/vue-clipboard2 "Github - vue-clipboard2")