前端复制到粘贴板

复制功能在前端开发中有许多常见的使用场景；

在实现这些功能时，需要注意浏览器的兼容性和安全性，确保操作不会因为浏览器限制或安全策略而失败。通常情况下，现代浏览器支持使用 navigator.clipboard.writeText 来进行文本复制操作，但在特定情况下（如在非交互上下文中）可能需要用户显式的允许。

实现方法：
方法一：

navigator.clipboard.writeText(str)
        .then(() => {
          this.$message.success('复制成功');
        })
        .catch((error) => {
          this.$message.error('复制失败');
        });

方法二：

 <i  id="btn" class="el-icon-document-copy"  @click="copyText(JSON.stringify(props.row.rowData, null, 2))"></i>
import Clipboard from 'clipboard';
copyText(str) {
      const clipboard = new Clipboard('#btn', { text: () => str });
      // 复制成功执行的回调
      clipboard.on('success', () => {
        this.$message.success('复制成功');
        clipboard.destroy();
      });
    },

方法三:

function copyTextToClipboard(text) {
  // 创建一个临时的 textarea 元素
  const textarea = document.createElement('textarea');
  textarea.value = text;
  document.body.appendChild(textarea);

  // 选择文本并执行复制命令
  textarea.select();
  document.execCommand('copy');

  // 清理临时元素
  document.body.removeChild(textarea);

  console.log('Text copied to clipboard:', text);
  alert('Text copied to clipboard!');
}

// 示例用法：将文本 'Hello, world!' 复制到剪贴板
copyTextToClipboard('Hello, world!');