H5剪切板功能

     最近使用Vue开发Line(日韩的一款类似中国微信平台)的内嵌H5.里面的有一个需求就是将当前链接粘贴，然后发送到pc端，在电脑上进行打开。所有搜集找到了一下几种情况：

---

1.不带input输入框的原生js方法

这种情况适用于复制非输入框中的文本到剪切板

     
被复制的内容
     点击复制

     

2.带输入框的原生js方法

用于复制input，textarea中的文本

     

    复制输入框中内容
    
    

    这种方法也可以进行延深，充当和方法1一样的用途。动态创建一个input输入框，将其内容置为想复制的内容，最后在将其移除或者隐藏即可。

3.js复制内容到剪贴板插件（clipboard.js）

clipboard.js官网

clipboard.js CDN地址

引用方式：

1. NPM   npm install --save clipboard
2. CDN  

里面还有很多高级用法,可以前往官网逻辑更多细节 Clipboard官网

4. Vue框架提供的剪切板插件    vue-clipboard2

    import Vue from 'vue'
    import VueClipboard from 'vue-clipboard2'
     
    VueClipboard.config.autoSetContainer = true // add this line
    Vue.use(VueClipboard)

Sample1

Sample2