vue的复制功能

安装clipboard

clipboard.js

首先第一步安装

npm install clipboard --save

在main.js里引用

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

页面 index.vue 使用

  <el-button
        icon="el-icon-search"
        class="btn"
        data-clipboard-action="copy"
        data-clipboard-target="#bar"
        @click="copyLink"
      ></el-button>
    </div>
    <h1 class="coupon-code" id="bar">{{ couponCode }}</h1>

index.ts

couponCode: string = '1';
  copyLink(): void {
    const clipboard = new Vue.prototype.clipboard('.btn');
    clipboard.on('success', () => {
      this.$message.success('操作成功');
    });
    clipboard.on('error', () => {
      this.$message('复制失败，请手动选择复制！');
    });
  }

---

顺便安利一下网络剪贴板（netcut.cn）
设备间传输数据很方便 测试再也不用下软件了 使用起来也超级简单

---

浏览器的 execCommand 函数

首先，你需要在你的 HTML 中添加一个按钮，并为它添加一个点击事件监听器。然后，你可以使用 execCommand 函数来执行复制命令，并使用 document.querySelector 来选择你想要复制的文本元素。

示例代码如下：

<template>
  <div>
    <button @click="copyText">复制文本</button>
    <p id="text-to-copy">这是要复制的文本</p>
  </div>
</template>

<script>
export default {
  methods: {
    copyText() {
      const textToCopy = document.querySelector('#text-to-copy');
      textToCopy.select();
      document.execCommand('copy');
    }
  }
};
</script>

在这个示例中，点击按钮时会执行 copyText 方法，该方法使用 querySelector 选择要复制的文本元素，然后使用 select 方法选中该文本元素，最后使用 execCommand 执行复制命令。

注意：不同的浏览器可能会有一些差异，你可能需要使用一些特定于浏览器的代码来解决这些差异。此外，请确保在复制时，文本元素是可见的，因为否则无法选中它。

---

复杂不好用版本 原生

setAttribute()

增加一个指定名称和治的新属性，或者把一个现有属性设定为指定的值

elementNode.setAttribute(name,value)

说明：

1.name：要设置的属性名

2.value:要设置的属性值

appendChild()

appendChild() 方法可向节点的子节点列表的末尾添加新的子节点。

给一个按钮绑定点击事件,以下是方法

 methods: {
    copyFn(val) {
      // createElement() 方法通过指定名称创建一个元素
      var copyInput = document.createElement("input");
      //val是要复制的内容
      copyInput.setAttribute("value", val);
      document.body.appendChild(copyInput);
      copyInput.select();
      try {
        var copyed = document.execCommand("copy");
        if (copyed) {
          document.body.removeChild(copyInput);
          this.$Message.success("复制成功");
        }
      } catch {
        this.$Message.error("复制失败，请检查浏览器兼容");
      }
    },
  },

组件库是View UI

总结

参考文档 js复制多行字符串