方法一： 使用 js 实现

1 function copyToClipboard (text) { 2     if(text.indexOf('-') !== -1) { 3         let arr = text.split('-'); 4         text = arr[0] + arr[1]; 5     } 6     var textArea = document.createElement("textarea"); 7       textArea.style.position = 'fixed'; 8       textArea.style.top = '0'; 9       textArea.style.left = '0';10       textArea.style.width = '2em';11       textArea.style.height = '2em';12       textArea.style.padding = '0';13       textArea.style.border = 'none';14       textArea.style.outline = 'none';15       textArea.style.boxShadow = 'none';16       textArea.style.background = 'transparent';17       textArea.value = text;18       document.body.appendChild(textArea);19       textArea.select();20 21       try {22         var successful = document.execCommand('copy');23         var msg = successful ? '成功复制到剪贴板' : '该浏览器不支持点击复制到剪贴板';24        alert(msg);25       } catch (err) {26         alert('该浏览器不支持点击复制到剪贴板');27       }28 29       document.body.removeChild(textArea);30 }

 

 

方法二：使用clipboard.min.js 实现

　　1： 在vue项目中，首先引入clipboard.min.js 类库

　　2： 利用vue钩子在页面加载完成后初始化clipboard对象

1         mounted(){2             new Clipboard($(this.$el).find('.btn-copy')[0]);3             new Clipboard($(this.$el).find('.btn-copy')[1]);4         }

　　3：html页面的复制按钮添加属性

 span.btn-copy.copy( @click="copyclipboard",data-clipboard-text="这里面是复制的内容，可以使用变量代替") 点击复制  

 

 

 

 

在非vue项目中也是一样，引入类库后初始化Clipboard对象就可以使用了

下面贴出一段使用案例源码

       
                 
          
     
      hello
     
     Copy      
                
            

 

 

可以参考github上的源码，写的很清晰

https://github.com/zenorocha/clipboard.js/