This repository has been archived on 2024-07-22. You can view files and clone it, but cannot push or open issues or pull requests.
Zaimki/components/LinkInput.vue

30 lines
962 B
Vue

<template>
<div class="input-group my-2">
<input class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')" id="link" ref="link">
<button class="btn btn-outline-secondary" ref="clipboard" data-clipboard-target="#link" :data-clipboard-text="link" @click="focusLink" :aria-label="$t('crud.copy')" :title="$t('crud.copy')">
<Icon v="clipboard"/>
</button>
<a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
<Icon v="external-link"/>
</a>
</div>
</template>
<script>
import ClipboardJS from 'clipboard';
export default {
props: {
link: { required: true },
},
mounted () {
new ClipboardJS(this.$refs.clipboard);
},
methods: {
focusLink() {
setTimeout(_ => this.$refs.link.select(), 100);
},
},
}
</script>