原生JS實現(xiàn):
const copyText = (text) => {
let e = document.createElement('input');
e.setAttribute('id', 'copyTextBox');
e.value = text;
document.getElementsByTagName('body')[0].appendChild(e);
document.getElementById('copyTextBox').select();
document.execCommand("copy");
document.getElementById('copyTextBox').remove();
let tag = document.getElementById('tag');
tag.style.display = "block";
setTimeout(() => {
tag.style.display = "none";
}, 3000);
}
為什么非要寫入document中呢监署,因為颤专,如果不寫入document中的話create的input標簽是不可拓展的。簡單來說就是不能給他value的钠乏。
<div>
<div className="share-overlay" onClick={stopProp}>
<div className="share-link">
<p>分享鏈接</p>
<p>{url}</p>
<Button onClick={() => copyText(url)}>復(fù)制鏈接</Button>
<div className="success-tag" id="tag">復(fù)制成功</div>
</div>
<div className="qr-code">
<QRCode value={url} size={100} />
<span id="qr-code"></span>
<p>掃描二維碼 分享到微信</p>
</div>
<div className="clearfix"></div>
</div>
</div>