51 lines
1.3 KiB
JavaScript
51 lines
1.3 KiB
JavaScript
Vue.component('copbox',{
|
|
template : `
|
|
<div class="y2t-output">
|
|
<div class="copied" v-bind:class="{ 'success': isSuccess}" ref="element">Copied!</div>
|
|
<div class="top" v-on:click="copyToClipboard">
|
|
<span class="copylabel">Copy to clipboard</span><span class="byl-icon-copy"></span>
|
|
</div>
|
|
<div ref="textToCopy" class="promptext">
|
|
<slot></slot>
|
|
</div>
|
|
<div class="shader"></div>
|
|
|
|
</div>
|
|
`,
|
|
data() {
|
|
return {
|
|
isSuccess: false
|
|
}
|
|
},
|
|
methods : {
|
|
copyToClipboard() {
|
|
const textToCopy = this.$refs.textToCopy;
|
|
const range = document.createRange();
|
|
range.selectNode(textToCopy);
|
|
window.getSelection().removeAllRanges();
|
|
window.getSelection().addRange(range);
|
|
document.execCommand('copy');
|
|
window.getSelection().removeAllRanges();
|
|
this.successOk();
|
|
},
|
|
successOk(){
|
|
this.isSuccess = true;
|
|
this.$refs.element.addEventListener('animationend', () => {
|
|
this.isFaded = false;
|
|
});
|
|
}
|
|
}
|
|
})
|
|
|
|
let vm = new Vue({
|
|
data() {
|
|
return {
|
|
loading: false
|
|
}
|
|
},
|
|
methods: {
|
|
loadingStart(){
|
|
this.loading = true
|
|
}
|
|
}
|
|
}).$mount('#root') |