前端实现复制粘贴通用方法封装

个人封装通用方法-真实项目

这段代码是用于将文本复制到剪贴板的函数，并且导出了这个函数作为模块的默认导出。

下面是对代码的详细解释：

1. 第一行引入了 Toast 组件。Toast 是一个轻量级的移动端提示组件，用于在页面上显示一段时间的提示信息。

   import { Toast } from 'vant';

2. copyToClipboard 函数用于将指定的文本复制到剪贴板。首先，它检查浏览器是否支持新的 Clipboard API（navigator.clipboard）。如果支持，就用 clipboard.writeText() 方法将文本写入剪贴板，并在成功或失败后显示相应的 Toast 提示。

   // 用于检测浏览器是否支持操作
   function  copyToClipboard(textToCopy,title) {
   if (navigator.clipboard) {
    navigator.clipboard.writeText(textToCopy).then(() => {
      console.log('文本已成功复制到剪贴板');
       Toast.success(`${title}已成功复制`)
    }).catch((error) => {
      console.error('复制失败:', error);
      Toast.fail(`${title}复制失败`)
    });
   }

3. 如果浏览器不支持 Clipboard API，接下来会使用旧的 document.execCommand('copy') 方法来实现复制。创建一个临时的 <textarea> 元素，将文本设置为它的值，并将它添加到页面中。然后通过 select() 方法选中文本，再使用 execCommand('copy') 方法将其复制到剪贴板。最后，通过 removeChild() 方法将临时元素从页面中移除。

   } else {
    // 对于不支持Clipboard API的浏览器，可以使用document.execCommand('copy')作为备选方案
    const textArea = document.createElement('textarea');
    textArea.value = textToCopy;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    console.log('文本已成功复制到剪贴板');
    Toast.success(`${title}已成功复制`)
   }
   }

4. 导出方法

   export default{
     copyToClipboard,
   
   }

• 注意事项：

• 代码中使用的 Toast 组件是来自 Vant UI 库，确保在使用之前已经正确导入并初始化 Vant UI。

• 这段代码依赖于新的 Clipboard API，因此在使用之前需要确保浏览器的兼容性。如果需要支持老版本的浏览器，可以使用替代方案 document.execCommand('copy')，但它在一些新浏览器中已被废弃，因此并不推荐使用。

• 在使用 document.execCommand('copy') 方法时，需要注意某些浏览器在没有用户交互的情况下无法执行该命令，这可能导致复制失败。

总结：

总的来说，这段代码提供了一种在现代浏览器中复制文本到剪贴板的方案，然而，对于浏览器兼容性上还有一些限制和潜在的问题需要注意。