复制内容到剪切板的两种方式

1.纯js实现复制到剪切板

 <div style="padding:20px">
    <el-input v-model="copyValue" id="copyText" style="width:400px;"></el-input>
    <el-button type="primary" @click="handleClipboard1()">copy</el-button>
    <p class="title">粘贴一下：</p>
    <el-input type="textarea" :rows="5" style="width: 400px;" v-model="pasteValue"></el-input>
 </div>

<script>
export default {
  data() {
    return {
      copyValue: "lhyyzwdxka",
      pasteValue: ""
    };
  },
  methods: {
    handleClipboard1() {
      let value  = document.getElementById('copyText').value
      this.clipboard(value)
    },
    clipboard(textCopyed){
      const inputElement = document.createElement("input") //构建input 
      inputElement.value = textCopyed  //设置内容
      document.body.appendChild(inputElement)  //添加临时实例
      inputElement.select()  //选择实例内容
      document.execCommand('Copy')  //执行复制
      document.body.removeChild(inputElement) //删除临时实例
      this.$message.success("已复制到剪切板")
    }
  }
};
</script>

2.使用clipboard.js插件

安装：npm install clipboard --save
引入：import Clipboard from "clipboard

  <el-input v-model="copyValue" id="foo" style='width:400px;'></el-input>
  <el-button type="primary" data-clipboard-action="copy" data-clipboard-target="#foo" id="copyBtn" @click="handleClipboard2()">copy</el-button>
  <p style="padding:10px 0" class="title">粘贴一下：</p>
  <el-input type="textarea" :rows="5" style="width: 400px;" v-model="pasteValue"></el-input>

<script>
import Clipboard from "clipboard";
export default {
  data() {
    return {
      copyValue: "lhyyzwdxka",
      pasteValue: ""
    };
  },
  methods: {
    handleClipboard2() {
      let that = this
      let clipboard = new Clipboard("#copyBtn");
      clipboard.on("success",function(e){
        that.$message.success("复制成功")
        e.clearSelection();
      })
    },
  }
};
</script>

属性说明：

data-clipboard-action="copy/cut":指明你想要复制还是剪切内容，copy为复制操作，cut为剪切操作。
data-clipboard-target="#foo"：要复制的给目标元素。