vue的复制功能

vue点击按钮有复制文本的功能

  • 安装clipboard
  • 浏览器的 execCommand 函数
  • 复杂不好用版本 原生
    • setAttribute()
    • appendChild()
  • 总结
    • 参考文档 [js复制多行字符串](https://blog.csdn.net/Cookysurongbin/article/details/100142696)

安装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复制多行字符串

你可能感兴趣的:(#,Vue,vue.js,javascript,html)