export default cpText

=。=，近期需要一个复制作用，随手提醒复制，尽管之前读过，可还是忘掉，干脆又封装形式了一个库，方便日后应用。

// npm i cp-text
import cpText from 'cp-text';
cpText('随意字符串数组具体内容');

以下属于点击复制标志，开启拷贝

<img
  onClick={() => cpText(location.href)}
  width="20"
  src="https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/copy.png"
/>

默认设置拷贝以后，就会自动提醒-复制：

基本原理

流行计划方案：execCommand 方式，兼容模式好，需要用到下表单元素。

当代计划方案：Clipboard API，当代兼容性设置基本上没什么问题，这是多线程，略微注意下

源代码

/**
 * 复制文本，并提醒复制
 * @params text必须复制字符串数组 isShowTip默认设置是true
 *
 * <img onClick={()=>cpText(url)} width="20" src='https://blog-huahua.oss-cn-beijing.aliyuncs.com/blog/code/copy.png'/>
 */
export const cpText = async (text, isShowTip = true) => {
  const clipboard = navigator.clipboard;
  clipboard ? await clipboard.writeText(text) : copyByInput(text);
  isShowTip && showTip();
};
function copyByInput(text) {
  alert(text);
  // 建立input原素
  const input = document.createElement('input');
  // 取值 - 需要复制的内容
  input.value = text;
  // 插入文本文档
  document.body.appendChild(input);
  // 掩藏
  input.style.cssText = `position:fixed;clip:rect(0 0 0 0);top:10px`;
  // 选定
  input.select();
  // 拷贝
  document.execCommand('copy');
  // 清除input
  document.body.removeChild(input);
}
function showTip() {
  const eleTip = document.createElement('span');
  eleTip.innerHTML = '复制 ~ ';
  eleTip.style.cssText =
    'z-index:3333;position:absolute;top:40%;left:45%;padding:6px 12px;background-color:#333;color:#fff;font-size:14px;border-radius:6px;font-family:sans-serif;';
  document.body.appendChild(eleTip);
  setTimeout(() => {
    eleTip?.parentNode?.removeChild(eleTip);
  }, 1000);
}

export default cpText;

引入

• 鑫旭大佬们的JS复制文字到粘贴板的简约完成及拓展