PronounsPage/components/LinkInput.vue

38 lines
1003 B
Vue

<template>
<div class="input-group my-2">
<input id="link" ref="link" class="form-control" readonly :value="link.replace('https://', '').replace('http://', '')">
<button
ref="clipboard"
class="btn btn-outline-secondary"
data-clipboard-target="#link"
:data-clipboard-text="link"
:aria-label="$t('crud.copy')"
:title="$t('crud.copy')"
@click="focusLink"
>
<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>