记录一下点击按钮复制内容的实现。
实现效果如图:
复制成功后Ctrl+v可粘贴:
实现方式也比较简单:
<template>
<div>
<p>{{ myText }}</p>
<el-button plain @click="handleCopy">复制</el-button>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
myText: '不管明天会不会更好,至少我拥有此刻啊。'
}
},
methods: {
handleCopy () {
try {
const input = document.createElement("input");
input.value = this.myText;
document.body.appendChild(input);
input.select();
if (document.execCommand('Copy')) this.$message.success('复制成功');
else { this.$message.error('复制失败'); }
document.body.removeChild(input);
} catch (err) {
this.$message.error('error');
}
}
}
}
</script>
document.execCommand(‘Copy’):拷贝当前选中的内容到剪切板,但document.execCommand已被弃用,谨慎选用,参见(https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand)