Improve copy button behavior

This commit is contained in:
Matthias 2023-05-29 15:07:54 +02:00
parent 8d477ab0f4
commit 078878df3f

View File

@ -1,9 +1,9 @@
<template> <template>
<div class="position-relative"> <div class="copy-container position-relative">
<i-mdi-content-copy <i-mdi-content-copy
v-if="isSupported && isValid" v-if="isSupported && isValid"
role="button" role="button"
class="position-absolute end-0 mt-1 me-2" class="copy-button position-absolute end-0 mt-1 me-2"
@click="copy(content)" @click="copy(content)"
/> />
<pre class="text-start border p-1"><code>{{ content }}</code></pre> <pre class="text-start border p-1"><code>{{ content }}</code></pre>
@ -21,4 +21,16 @@ defineProps({
const { copy, isSupported } = useClipboard(); const { copy, isSupported } = useClipboard();
</script> </script>
<style scoped></style> <style lang="scss" scoped>
.copy-container {
.copy-button {
opacity: 0;
}
&:hover {
.copy-button {
opacity: 1;
}
}
}
</style>