如何创建复制到剪贴板图标没有输入文件?

Question

我有这个Vue.js代码:

<div class="border">
<h4>{{ name }}</h4>
<div class="code">
<p>{{ code }}</p>
<img src="~/assets/img/copy.svg" alt="" @click="copy"/>
</div>
</div>

复制按钮上有copy功能。我想要的是复制code字段在剪贴板。我在互联网上寻找解决方案，但是只有input文件的解决方案，但是，正如你所看到的，我只有一段。

我试图使用ref和id在那一段，但它不起作用。与ref:

<p ref='code'>{{ code }}</p>

copy() {
this.$refs.code.focus()
document.execCommand('copy')
}

Withid:

<p id='code'>{{ code }}</p>

copy(id) {
const input = document.querySelector(`#${id}`)
input.setAttribute('type', 'text')
input.select()
document.execCommand('copy')
input.setAttribute('type', 'hidden')
}

Answer 1

试试这个

Html

<p id="text_element">Copy this !</p>
<button onclick="copyToClipboard('text_element')">
Copy to clipboard
</button>

Javascript

function copyToClipboard(elementId) {
var aux = document.createElement("input");
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
document.body.appendChild(aux);
aux.select();
document.execCommand("copy");
document.body.removeChild(aux);}
function log() {
console.log('---')
}