题记

—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

在实际项目开发中，用到复制的地方还挺多，如一些链接过长不显示，点击一下载复制到剪切板或者是将复制的内容自动填到其他组件中，这个复制功能有些是纯html页面，有些是vue项目，本文章来总结常用的三种复制方式。

1 使用 clipboard 组件来实现复制功能

#1.安装依赖
npm install --save v-clipboard

//2.在main.js中引入 并注册组件
import Vue from 'vue'
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)
 ```
```html
///3.使用
<template>
    <button v-clipboard="copyContent"
        v-clipboard:success="clipboardSuccessHandler" 
        v-clipboard:error="clipboardErrorHandler">    
        Copy to clipboard
   </button> 
</template>
  ```
```javascript
export default {
   data() {
      return {
         //定义复制成功的文本记录变量
         copyContent:''
      }
   },
   methods: {
      //定义复制失败的回调
      clipboardSuccessHandler ({ value, event }){
         console.log('success', value);
         this.$message.success("已复制");
      },
      //定义复制成功的回调方法
      clipboardErrorHandler ({ value, event }) {
         console.log('error', value)
      }
    }
}

2 来一段 JS

<el-table-column
  prop="versionUrl"
  header-align="center"
  align="center"
  label="升级包下载地址">
  <template slot-scope="scope">
    <el-button type="primary" plain @click="copyUrl(scope.row.versionUrl)">点击复制</el-button>
  </template>
</el-table-column>


<script>
  export default {
    methods: {
      ///定义点击复制的功能
      copyUrl(url){
        //创建一个 Input标签 
        let oInput = document.createElement('input');
        oInput.value = url;
        document.body.appendChild(oInput);
        oInput.select(); // 选择对象;
        console.log(oInput.value)
        // 执行浏览器复制命令
        /// 复制命令会将当前选中的内容复制到剪切板中
        /// 如这里构建的 Input标签 
        document.execCommand("Copy"); 
        this.$message({
          message: '复制成功',
          type: 'success'
        });
        ///复制成功后再将构造的标签 移除
        oInput.remove()
      },
}

3 使用 clipboard js 方式

第一步是引入 clipboard 代码如下：

 <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
2 <script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>

第二步就是使用了

<body>
    <div>
        <span class="app_title">APP号：</span>
        <input type="text" class="app_v" value="下载链接" id="target1" readonly="" />
    </div>
    <button class="app_btn" data-clipboard-action="copy" data-clipboard-target="#target1" id="copy_btn1">复制</button>
</body>

然后对应的 JS 代码如下：

 <script>
     // 获取需要复制的内容  jquery 语法
     let targetText1 = $("#target1").text();   
     // 在点击复制按钮上new一个 Clipboard 对象
     let clipboard1 = new Clipboard('#copy_btn1');  
     //然后设置复制成功的回调监听 
     clipboard1.on('success', function (e) {    
         // 复制成功时   
         // 清除选中的文字的选择状态
         e.clearSelection();                
         alert('复制成功')
     });
 </script>