37 lines
895 B
Vue
37 lines
895 B
Vue
<template>
|
|
<c-input-text v-model:value="value">
|
|
<template #suffix>
|
|
<n-tooltip trigger="hover">
|
|
<template #trigger>
|
|
<c-button circle variant="text" size="small" @click="onCopyClicked">
|
|
<icon-mdi-content-copy />
|
|
</c-button>
|
|
</template>
|
|
{{ tooltipText }}
|
|
</n-tooltip>
|
|
</template>
|
|
</c-input-text>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useVModel, useClipboard } from '@vueuse/core';
|
|
import { ref } from 'vue';
|
|
|
|
const props = defineProps<{ value: string }>();
|
|
const emit = defineEmits(['update:value']);
|
|
|
|
const value = useVModel(props, 'value', emit);
|
|
const tooltipText = ref('Copy to clipboard');
|
|
|
|
const { copy } = useClipboard({ source: value });
|
|
|
|
function onCopyClicked() {
|
|
copy();
|
|
tooltipText.value = 'Copied !';
|
|
|
|
setTimeout(() => {
|
|
tooltipText.value = 'Copy to clipboard';
|
|
}, 2000);
|
|
}
|
|
</script>
|