When I click the vs-button
, the single_download_link.pdfId
should be copied on clipboard.
I tried like this. But it was not working. And I will not use v-clipboard
node module.
Please help me. Regards.
DOM code:
<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',
ponents:{
Vinput,
},
data () {
return {
single_download_link:{
pdfId:"",
pdfRandomName:"",
uploaderUserName:"",
uploaderUserId:"",
uploaderUserEmail:""
}
}
},
methods:{
copy(){
this.$refs.text.select();
document.execCommand('copy');
},
},
}
</script>
When I click the vs-button
, the single_download_link.pdfId
should be copied on clipboard.
I tried like this. But it was not working. And I will not use v-clipboard
node module.
Please help me. Regards.
DOM code:
<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',
ponents:{
Vinput,
},
data () {
return {
single_download_link:{
pdfId:"",
pdfRandomName:"",
uploaderUserName:"",
uploaderUserId:"",
uploaderUserEmail:""
}
}
},
methods:{
copy(){
this.$refs.text.select();
document.execCommand('copy');
},
},
}
</script>
Share
Improve this question
edited Jun 8, 2021 at 14:35
ParisaN
2,0923 gold badges26 silver badges59 bronze badges
asked Jun 8, 2021 at 7:04
topwebdevtopwebdev
232 silver badges6 bronze badges
1 Answer
Reset to default 9Update 2021:
document.execCommand() is marked as depreciated
Alternative.
Simply
copyToClipBoard(textToCopy){
navigator.clipboard.writeText(textToCopy);
},
Previous answer:
This worked for me, just put it into your methods and pass any String
you wanted to copy.
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()
},