复制文本工具类

需求:复制平台链接文本

实现:

//复制文字
function copyText(text: string) {
  var input = document.createElement("input");
  input.value = text;
  document.body.appendChild(input);
  input.select();
  navigator.clipboard.writeText(text);
  document.body.removeChild(input); // 删除临时实例
  console.log('链接复制成功!');//修改自己需要的提示
}

问题:

​​Clipboard​​ 接口实现了 Clipboard API,如果用户授予了相应的权限,就能提供系统剪贴板的读写访问。在 Web 应用程序中,Clipboard API 可用于实现剪切、复制和粘贴功能。系统剪贴板暴露于全局属性 Navigator.clipboard 之中。如果用户没有适时使用 Permissions API 授予相应权限和​​"clipboard-read"​​ 或 ​​"clipboard-write"​​ 权限,调用 ​​Clipboard​​ 对象的方法不会成功。部署线上将报错。

于是更改如下:但(document.execCommand即将废弃)后面还是使用复制插件为好。

// 先给要复制的文本或者按钮加上点击事件后,并将要复制的值传过来
async function copyText(val: string) {
  if (navigator.clipboard && window.isSecureContext) {
    hlAlert('链接复制成功!', 1);
    return navigator.clipboard.writeText(val);
  } else {
    const textArea = document.createElement('textarea');
    textArea.value = val;
    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();
    hlAlert('链接复制成功!', 1);
    return new Promise((res: any, rej: any) => {
      document.execCommand('copy') ? res() : rej();
      textArea.remove();
    })
  }
}

猜你喜欢

转载自blog.csdn.net/enhenglhm/article/details/128949917