<a href="https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js">下载</a>　

下载地址：https://blog-static.cnblogs.com/files/ruanqin/clipboard.min.js

html中：

<div id="app">

　　<a href="javascript:;" @click="copyClick" class="copy" data-clipboard-text="要让复制的内容" data-clipboard-action="copy" >点击复制ID</a>

</div>

 

在js中:

new Vue({

　　el: '#app',

　　data: function () {

　　　　return {

　　　　}

　　},

　　methods: {

　　　　copyClick: function(){

　　　　　　var clipboard = new Clipboard("#copyBtn");

　　　　　　clipboard.on('success', function(e) {

　　　　　　　　MINT.Toast("复制成功:"+e.text);

　　　　　　});

　　　　　　clipboard.on('error', function(e) {

　　　　　　　　MINT.Toast("请重试");

　　　　　　});

　　　　}

　　},

　　created: function(){

　　　　var that = this;

　　})

如此简单的就实现复制了

 

 

在vue中使用 

1. 引入clipboard.js

　　npm install clipboard --save  

2. 在需要使用的组件中import

　　

import Clipboard from 'clipboard';  

3. 添加需要复制的内容　　

　　<li class="warp-li copy" id="copyBtn" data-clipboard-text="shou-a666" @click="copy">

　　　　<img src="../assets/img/icom_weixin@2x.png" alt="">

　　　　<p>shou-a666</p>

　　</li>

4. methods中写入copy方法

　　copy() { 　　 

　　　　let that = this;

　　　　let clipboard = new Clipboard('#copyBtn')

　　　　clipboard.on('success', e => {

　　　　　　that.$toast("复制成功:"+e.text)

　　　　　　clipboard.destroy()

　　　　})

　　　　clipboard.on('error', e => {

　　　　　　console.log('该浏览器不支持自动复制')

　　　　　　clipboard.destroy()

　　　　})

      }