copyme component added to js
This commit is contained in:
parent
f92bab1cf6
commit
2fa13de5fa
|
@ -1,4 +1,36 @@
|
||||||
|
Vue.component('copyme', {
|
||||||
|
template: `
|
||||||
|
<section class="copyme-containter" v-on:click="copyToClipboard">
|
||||||
|
<span class="copypopup" v-bind:class="{ 'success': isCopied}" ref="element">Copied!</span>
|
||||||
|
<section class="copyme" ref="copyThis">
|
||||||
|
<slot></slot>
|
||||||
|
</section>
|
||||||
|
</section>
|
||||||
|
`,
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isCopied: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods : {
|
||||||
|
copyToClipboard() {
|
||||||
|
const textToCopy = this.$refs.copyThis;
|
||||||
|
const range = document.createRange();
|
||||||
|
range.selectNode(textToCopy);
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
|
window.getSelection().addRange(range);
|
||||||
|
document.execCommand('copy');
|
||||||
|
window.getSelection().removeAllRanges();
|
||||||
|
this.copyDone();
|
||||||
|
},
|
||||||
|
copyDone(){
|
||||||
|
this.isCopied = true;
|
||||||
|
this.$refs.element.addEventListener('animationend', () => {
|
||||||
|
this.isCopied = false;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
Vue.component('ppbut' ,{
|
Vue.component('ppbut' ,{
|
||||||
template : `
|
template : `
|
||||||
|
|
Loading…
Reference in New Issue