vue 实现点击复制文本到剪贴板

一、复制单行文本

1. navigator.clipboard.writeText

<template>
  <div>
    <el-button type="primary" @click="btn1">复制</el-button>
    <div style="margin-top: 50px">{{ msg1 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg1: "msg1msg1msg1msg1", //复制的内容
    };
  },

  methods: {
    // 方法一
    btn1() {
      // navigator.clipboard.writeText 该方法需要在安全域下才能够使用，比如：https 协议的地址、127.0.0.1、localhost
      navigator.clipboard
        .writeText(this.msg1)
        .then(() => {
          this.$message.success("复制成功");
        })
        .catch((err) => {
          // 复制失败
          console.error("复制失败");
        });
    },
  },
};
</script>

2.execCommand方法

<template>
  <div>
    <el-button type="primary" @click="btn2">复制</el-button>
    <div style="margin-top: 50px">{{ msg2 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg2: "msg2msg2msg2msg2", //复制的内容
    };
  },
  methods: {
    btn2() {
      let input = document.createElement("input");
      document.body.appendChild(input);
      input.value = this.msg2; // 此处为需要复制的文本变量
      input.focus();
      input.select();
      try {
        let result = document.execCommand("copy");
        document.body.removeChild(input);
        if (!result) {
          console.error("复制失败");
        } else {
          this.$message.success("复制成功");
        }
      } catch (e) {
        document.body.removeChild(input);
        alert("当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作");
      }
    },
  },
};
</script>

3. 使用vue-clipboard2库

1.安装npm install --save vue-clipboard2
2.main.js 中引入

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

3.页面使用

<template>
  <div>
    <el-button
      type="primary"
      v-clipboard:copy="msg3"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
      >复制</el-button
    >
    <div style="margin-top: 50px">{{ msg3 }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg3: "msg3msg3msg3msg3", //复制的内容
    };
  },
  methods: {
    onError() {
      console.error("复制失败");
    },
    // 复制
    onCopy() {
      this.$message.success("复制成功");
    },
  },
};
</script>

4. 使用clipboard.js库

1.npm install clipboard --save
2.当前文件引入 import ClipboardJS from "clipboard";

<template>
  <div>
  	<!-- 也可通过设置data-clipboard-text属性指定要复制的内容 -->
  	<!-- <button class="btn4" data-clipboard-text="要复制的内容">复制</button> -->
    <el-button type="primary" class="btn4">复制</el-button>
    <div style="margin-top: 50px">{{ msg4 }}</div>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  data() {
    return {
      msg4: "msg4msg4msg4msg4", //复制的内容
    };
  },
  mounted() {
    let that = this;
    const clipboard = new Clipboard(".btn4", {
      text: function () {
        return that.msg4;
      },
    });
    clipboard.on("success", function (e) {
      console.log("复制成功");
    });
    clipboard.on("error", function (e) {
      console.log("复制失败");
    });
  }
};
</script>

二、复制多行文本

1. 使用input/textarea

创建input的textarea，把需要复制的内容用\n连接

<template>
  <div class=''>
    <div>
      <p>msg1:{{ msg1 }}</p>
      <p>msg2:{{ msg2 }}</p>
      <p>msg3:{{ msg3 }}</p>
      <p>msg4:{{ msg4 }}</p>
      <el-button type="text" @click="copy1">复制</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name:'',
  components: {},
  props:[],
  data() {
    return {
      msg1:'msg1msg1msg1msg1',
      msg2:'msg2msg2msg2msg2',
      msg3:'msg3msg3msg3msg3',
      msg4:'msg4msg4msg4msg4',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    copy1(){
      let that = this
      let txa = document.createElement('textarea')
      let txval = 'msg1:' + that.msg1 + '\n' + 'msg2:' + that.msg2 + '\n' + 'msg3:' + that.msg3 + '\n' + 'msg4:' + that.msg4
      txa.value = txval
      document.body.appendChild(txa)
      txa.focus();
      txa.select()
      try {
        let result = document.execCommand("copy");
        document.body.removeChild(txa);
        if (!result) {
          console.error("复制失败");
        } else {
          this.$message.success("复制成功");
        }
      } catch (e) {
        document.body.removeChild(txa);
        alert("当前浏览器不支持复制功能，请检查更新或更换其他浏览器操作");
      }
    }
  }
};
</script>
<style lang='scss' scoped>
</style>

2. 使用clipboard.js库

1.npm install clipboard --save
2.当前文件引入 import ClipboardJS from "clipboard";
3.通过设置data-clipboard-target属性指定了要复制的目标元素

<template>
  <div class=''>
    <div id="content">
      <p>msg1:{{ msg1 }}</p>
      <p>msg2:{{ msg2 }}</p>
      <p>msg3:{{ msg3 }}</p>
      <p>msg4:{{ msg4 }}</p>
    </div>
    <!-- 通过设置data-clipboard-target属性指定了要复制的目标元素 -->
    <el-button type="text" class="copy-btn" data-clipboard-target="#content">复制</el-button>
  </div>
</template>
<script>
import Clipboard from 'clipboard';
export default {
  name:'',
  components: {},
  props:[],
  data() {
    return {
      msg1:'msg1msg1msg1msg1',
      msg2:'msg2msg2msg2msg2',
      msg3:'msg3msg3msg3msg3',
      msg4:'msg4msg4msg4msg4',
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const clipboard = new Clipboard('.copy-btn'); // .copy-btn为按钮元素的class名称或选择器
    clipboard.on('success', (e) => {
      console.log('已复制到剪贴板！');
      e.clearSelection(); // 清除选中状态
    });
    clipboard.on('error', () => {
      console.warn('无法复制到剪贴板！');
    });
  },
  methods: {}
};
</script>
<style lang='scss' scoped>
</style>