要实现文本复制,可以使用 Clipboard API 中的 writeText() 方法。这个方法将指定的文本写入剪贴板。
const orderNumRef = useRef<HTMLInputElement>(null);
const copyHandle = () => {
navigator.clipboard
.writeText(orderNumRef?.current.innerText)
.then(() => message.success('复制成功'));
};
<div className={styles.share}>
<span>
我的邀请码:<span ref={orderNumRef}>1234567</span>
</span>
<img src={copyIcon} alt="" onClick={copyHandle} />
</div>
navigator.clipboard是最新的api。不支持ie,详细自己看MDN文档 Clipboard.writeText() - Web API 接口参考 | MDN (mozilla.org)
除了使用 Clipboard API 中的 writeText() 方法,还有其他一些方法可以实现文本复制。
其中一种方法是通过创建一个临时的 textarea 元素并将其内容设置为要复制的文本,然后执行 document.execCommand('copy') 命令来实现复制操作。以下是一个示例代码:
function copyToClipboard(text: string) {
const elem = document.createElement('textarea');
elem.value = text;
document.body.appendChild(elem);
elem.select();
document.execCommand('copy');
document.body.removeChild(elem);
message.success('文本已成功复制到剪贴板')
}