工作中经常会遇到复制文字到剪贴板的需求,今天来整理一下几种方法。
1. 浏览器的复制命令
当一个HTML文档切换到设计模式时,document暴露 execCommand 方法,该方法允许运行命令来操纵可编辑内容区域的元素。(兼容性不优秀)
命令
copy
拷贝当前选中内容到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
cut
剪贴当前选中的文字并复制到剪贴板。启用这个功能的条件因浏览器不同而不同,而且不同时期,其启用条件也不尽相同。使用之前请检查浏览器兼容表,以确定是否可用。
<input ref="copyUrl" readonly v-model="inviteUrl"/>
<el-button type="danger" @click="copy()" class="copy_text">复制文本