vue 实现一键复制功能（两种方式）

方法 一 ：

<div class="mask-cont">
   <p><input id="input" /></p>
   <button class="btns" @click="copyToClip">复制</button>
 </div>


copyToClip:function() {
    let that = this
    var input = document.getElementById("input");
    input.value = that.address; // 要复制的文本框的内容（此处是后端返回的内容）
    input.select(); // 选中文本
    document.execCommand("copy"); 
    alert("复制成功")
}

方法二：下载插件

npm install --save vue-clipboard2

main.js文件中

import Vue from 'vue'

import VueClipBoard from 'vue-clipboard2'

Vue.use(VueClipBoard)

使用一：

<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>

使用二：

<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("复制失败!");
        }
      );
}

 

 

 

 

<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>————————————————版权声明：本文为CSDN博主「Life   a dream」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/Li8L9xF/article/details/123194877