mirror of
https://gitlab.com/PronounsPage/PronounsPage.git
synced 2025-08-05 12:07:22 -04:00
30 lines
886 B
Vue
30 lines
886 B
Vue
<script setup lang="ts">
|
|
import { useClipboard } from '@vueuse/core';
|
|
|
|
const props = defineProps<{
|
|
link: string;
|
|
}>();
|
|
|
|
const value = computed(() => props.link.replace('https://', '').replace('http://', ''));
|
|
|
|
const { copy, copied } = useClipboard({ source: value });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="input-group my-2">
|
|
<input ref="linkInput" class="form-control" readonly :value>
|
|
<button
|
|
type="button"
|
|
:class="['btn', copied ? 'btn-success' : 'btn-outline-secondary']"
|
|
:aria-label="$t('crud.copy')"
|
|
:title="$t('crud.copy')"
|
|
@click="copy()"
|
|
>
|
|
<Icon :v="copied ? 'clipboard-check' : 'clipboard'" />
|
|
</button>
|
|
<a :href="link" target="_blank" rel="noopener" class="btn btn-outline-secondary">
|
|
<Icon v="external-link" />
|
|
</a>
|
|
</div>
|
|
</template>
|