<div>
<el-input type="text" style="width: 600px;" v-model="inputText" />
<button @click="copyText" class="el-icon-document-copy ml-3"></button>
<p v-if="isCopied" class="text-xs text-green-500 ml-3">已复制到剪贴板<i class="el-icon-check"></i>
</p>
</div>
(class中使用的 TailwindCSS)
// 实现复制操作
copyText() {
/* 创建一个临时输入框 */
const tempInput = document.createElement('input');
tempInput.value = this.endpointText;
document.body.appendChild(tempInput);
/* 选择临时输入框的内容 */
tempInput.select();
tempInput.setSelectionRange(0, 99999); /* 兼容移动设备 */
/* 复制内容到剪贴板 */
document.execCommand('copy');
/* 删除临时输入框 */
document.body.removeChild(tempInput);
/* 设置复制状态并显示提示 */
this.isCopied = true;
setTimeout(() => {
this.isCopied = false;
}, 2000);
},
data(){
return{
isCopied: false,
inputText: '',
}
}