67 lines
1.5 KiB
Vue
67 lines
1.5 KiB
Vue
<!--
|
|
# Clipboard Component
|
|
Copies a string into the clipboard
|
|
|
|
## Props
|
|
* value: String
|
|
|
|
## Slots
|
|
* default: Replaces inner content
|
|
* text: Replaces the text
|
|
-->
|
|
|
|
<template lang="pug">
|
|
span(@click.stop='copy()', style='cursor: pointer')
|
|
slot(:state='state')
|
|
icon.fa-fw(name="copy", v-if="state==='pristine'")
|
|
icon.fa-fw(name="check", v-if="state==='copied'")
|
|
icon.fa-fw(name="exclamation-triangle", v-if="state==='error'")
|
|
slot(name='text') Copy
|
|
</template>
|
|
|
|
|
|
<script type="text/babel">
|
|
import 'vue-awesome/icons/check';
|
|
import 'vue-awesome/icons/copy';
|
|
import 'vue-awesome/icons/exclamation-triangle';
|
|
|
|
export default {
|
|
name: "Clipboard",
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
state: 'pristine' // copied, error
|
|
};
|
|
},
|
|
methods: {
|
|
copy() {
|
|
let el = document.createElement('textarea');
|
|
Object.assign(el.style, {
|
|
position: 'absolute',
|
|
left: '-200%'
|
|
});
|
|
el.value = this.value;
|
|
document.body.appendChild(el);
|
|
|
|
let success = false;
|
|
try {
|
|
el.select();
|
|
success = document.execCommand('copy');
|
|
}
|
|
catch(e) {
|
|
alert('Dein alter Browser unterstützt diese Funktion leider nicht.');
|
|
console.error(e);
|
|
}
|
|
document.body.removeChild(el);
|
|
this.state = success ? 'copied' : 'error';
|
|
this.$emit('change', this.state);
|
|
}
|
|
}
|
|
};
|
|
</script>
|