#javascript #laravel #vue.js #nuxt.js
Вопрос:
Когда я нажимаю кнопку vs-button
, single_download_link.pdfId
она должна быть скопирована в буфер обмена. Я пытался вот так. Но это не сработало. И я не буду использовать v-clipboard
модуль узла. Пожалуйста, помогите мне. С уважением.
Код DOM:
<div ref="text" class="w-full">{{single_download_link.pdfId}}
</div>
<vs-button block @click="copy()">
Copy this link to clipboard.
</vs-button>
//this is my function
<script>
import "../../assets/css/products.css";
export default {
name: 'Products',
components:{
Vinput,
},
data () {
return {
single_download_link:{
pdfId:"",
pdfRandomName:"",
uploaderUserName:"",
uploaderUserId:"",
uploaderUserEmail:""
}
}
},
methods:{
copy(){
this.$refs.text.select();
document.execCommand('copy');
},
},
}
</script>
Ответ №1:
Обновление 2021 года:
document.execCommand() помечен как амортизированный
Альтернатива.
Просто
copyToClipBoard(textToCopy){
navigator.clipboard.writeText(textToCopy);
},
Предыдущий ответ:
Это сработало для меня, просто поместите это в свои методы и передайте все String
, что вы хотели скопировать.
copyToClipBoard(textToCopy){
const tmpTextField = document.createElement("textarea")
tmpTextField.textContent = textToCopy
tmpTextField.setAttribute("style","position:absolute; right:200%;")
document.body.appendChild(tmpTextField)
tmpTextField.select()
tmpTextField.setSelectionRange(0, 99999) /*For mobile devices*/
document.execCommand("copy")
tmpTextField.remove()
},