vue使用clipboard插件实现点击按钮复制输入内容

那么我们该如何来实现呢？想到利用clipboard插件来实现，let’s do it

1. 因为是在vue里面集成，我们先下好这个clipboard插件，输入以下命令即可完成安装

npm install clipboard --save

如图所示，安装成功

2. 在你要使用的vue文件里导入clipboard，输入以下代码：

import Clipboard from 'clipboard';

如图所示，在你的scrip区域导入

3. 现在我们就来编写代码，template区的：一个输入框、一个按钮，然后再实现copy方法，如下所示：

   <el-dialog
     title="分享"
     :visible.sync="centerDialogVisible"
     width="30%"
     >
     <div class="demo-image" align="center">
       <div class="block" >
         <el-image
           style="width: 150px; height: 150px"
           :src="codeUrl"
           :fit="fit"></el-image>
       </div>
       <div class="demonstration">手机扫描二维码</div>
       <span class="demonstration">分享给好友</span>
     </div>
     <div style="margin-top: 20px;">
       <div style="display:inline-block">分享地址：</div>
       <div style="display:inline-block">
       <el-input v-model="shareLink"
       :data-clipboard-text="shareLink"
       id="copy_link"
       class="input-with-select"
       style="width: 155%;">
         <el-button slot="append"
           class="cpoy-input"
           icon="el-icon-copy-document"
           style="color: #fff;background-color: #409eff;"
           @click="copy" data-clipboard-action="copy" data-clipboard-target="#copy_link">
           复制
         </el-button>
       </el-input>
       </div>
     </div>
   </el-dialog>

重点如图所示：

然后，我们来实现copy方法：

   copy(){
     var clipboard = new Clipboard('.input-with-select')
     clipboard.on('success', e => {
       console.log('复制成功')
       // 释放内存
       clipboard.destroy()
     })
     clipboard.on('error', e => {
       // 不支持复制
       console.log('该浏览器不支持自动复制')
       // 释放内存
       clipboard.destroy()
     })
   }

还是熟悉的页面，我们来点击复制按钮

可以看到，这个状态已经是复制成功了

然后，在控制台粘贴一下

可以看到已经成功实现该功能了，如果对你有帮助的话点个赞吧！