剪切板

使用navigator.clipboard API，这个 API 提供了两个强大的方法：writeText和readText。writeText方法允许我们异步地将文本写入剪贴板，而readText则可以读取剪贴板中的文本。

剪切

const copyText = async (text) => {
  try {
    await navigator.clipboard.writeText(text);
    console.log('复制成功！');
  } catch (err) {
    console.error('无法复制: ', err);
  }
};

粘贴

const pasteText = async () => {
  try {
    const text = await navigator.clipboard.readText();
    console.log('粘贴成功: ', text);
  } catch (err) {
    console.error('无法粘贴: ', err);
  }
};

兼容性

Navigator 这种新 API 都是需要事先授予权限的，而权限是通过 Permissions API 获取的。这时候，我们需要用户明确授权。

虽然新 API 带来了便利，但它并不是万能的。在某些环境下，比如安卓的 WebView，我们可能会遇到权限问题。

Permissions API 在安卓的 WebView 中是没实现的。

为了兼容，代码里加一个Permissions API的判断

if (navigator.clipboard && navigator.permissions) { 
    await navigator.clipboard.writeText(val) 
}

通用剪切方法

const copyText = async (val) => {
  try {
    // 使用现代 API 尝试复制
    if (navigator.clipboard && navigator.permissions) {
      await navigator.clipboard.writeText(val);
      return; // 如果成功，直接返回
    }

    // 降级方案
   const textArea = document.createElement('textArea') 
   textArea.value = val 
   textArea.style.width = 0 
   textArea.style.position = 'fixed' 
   textArea.style.left = '-999px' 
   textArea.style.top = '10px' 
   textArea.setAttribute('readonly', 'readonly')
   document.body.appendChild(textArea) 
   textArea.select()

    // 尝试执行复制操作
    const success = document.execCommand('copy');
    if (!success) {
      throw new Error('无法复制文本');
    }

    // 清理
    document.body.removeChild(textArea);
  } catch (err) {
    console.error('复制失败:', err);
  }
};