前端 :数据一键复制到剪贴板

需求:给定一些数据,将这些数据一键复制到剪贴板,实现拷贝链接的功能

方案一:

js 有提供对剪贴板操作的方法,document.execCommand('Copy');

但是在实现的过程中会发现并不能实现,可在MDN上看到该方法已被弃用


方案二:

MDN提供了新的api,Clipboard.writeText()使用更为简便,但是限制也是极大的。


在Chrome的devtools中navigator.clipboard的输出是undefined。这是因为浏览器禁用了非安全域的navigator.clipboard。对于安全域的定义是:

1、本地访问

2、开启TLS安全认证的地址如https协议的地址、127.0.0.1、localhost

方案三:

为突破以上限制,小编在此推荐使用插件。查阅资料,小编发现antdesign的Typography组件有类似功能  ,底层用的插件是vue-clipboard2,使用很方便,可实现一键复制。除vue-clipboard2之外还有vue-clipboard3是适配vue3的版本,可按需使用。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容