vue实现点击按钮一键复制功能

点击复制按钮后，将内容一键复制下来，不用去选中复制

第一种直接使用js方式：

<div class="mask-cont">
   <p><input id="input" /></p>
   <button class="btns" @click="copyToClip">复制</button>
 </div>
 
copyToClip() {
    var input = document.getElementById("input");
    input.value = this.copyText; // 要复制的文本框的内容（此处是后端返回的内容）
    input.select(); // 选中文本
    document.execCommand("copy"); 
    alert("复制成功")
}

可以通过 display:none将input框隐藏

第二种使用插件方式（推荐）：

安装插件

npm install --save vue-clipboard2

在main.js中引用

import VueClipBoard from 'vue-clipboard2'
 
Vue.use(VueClipBoard)

在页面中调用也有两种方式

第一种：value即是要复制的内容

<button @click="seccendCopy">第二种方式复制</button>
 
seccendCopy() {
      this.$copyText(this.value).then(
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制成功!");
        },
        function(e) {
          console.log("copy arguments e:", e);
          alert("复制失败!");
        }
      );
}

第二种：

<template>
<div>
    <div>
      <textarea name="复制内容" id cols="30" rows="10" v-model="value"></textarea>
      <button
        v-clipboard:copy="value"
        v-clipboard:success="firstCopySuccess"
        v-clipboard:error="firstCopyError"
      >第一种方式复制</button>   
    </div>
    <div>
      <textarea name="粘贴内容" id cols="30" rows="10"></textarea>
    </div>
  </div>
</template> 
 
<script>
export default {
  data() {
    return {
      value: "A simple vuejs 2 binding for clipboard.js!"
    };
  },
  methods: {
    firstCopySuccess(e) {
      console.log("copy arguments e:", e);
      alert("复制成功!");
    },
    firstCopyError(e) {
      console.log("copy arguments e:", e);
      alert("复制失败!");
    }
  }
};
</script>