点击复制链接的时候,可以将前面的链接复制下来,当复制成功时会打印‘内容已经复制到剪切板啦’。代码为:
<input
value="https://www.baidu.com/"
type="text"
name="urlLink"
id="copyContent"
/>
<button
id="copyBtn"
data-clipboard-action="copy"
data-clipboard-target="#copyContent">
复制链接
</button>
componentDidMount(): void {
this.clipboard = new Clipboard('#copyBtn');
this.clipboard.on('success', e => {
console.log('内容已经复制到剪切板啦');
e.clearSelection();
});
this.clipboard.on('error', e => {
console.error('无法复制', e.action);
console.error('Trigger:', e.trigger);
});
}
componentWillUnmount(): void {
this.clipboard.destroy();
}
效果为: