我有這個 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')
}
與id：
<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')
}
uj5u.com熱心網友回復：
嘗試這個
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('---')
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/340037.html
上一篇：無法從div中抓取文本