Pass component into hyperscript
This commit is contained in:
parent
05db0b693e
commit
3e39bda014
|
@ -238,33 +238,6 @@ body {
|
||||||
margin-right: 1.5rem;
|
margin-right: 1.5rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
|
||||||
position: absolute;
|
|
||||||
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
|
|
||||||
margin: 0.5em;
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
background-color: rgb(153 153 255 / 10%);
|
|
||||||
|
|
||||||
border: 1px solid rgb(153 153 255 / 60%);
|
|
||||||
border-radius: 0.5em;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
transition: 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
.button {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,32 @@
|
||||||
|
<script setup lang="ts"></script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="absolute flex flex-col justify-start top-0 left-0 w-full h-full pointer-events-none"
|
||||||
|
>
|
||||||
|
<div class="flex flex-row justify-end items-center p-2">
|
||||||
|
<iconify-icon icon="mdi:content-copy" inline class="button" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.button {
|
||||||
|
@apply flex-grow-0;
|
||||||
|
|
||||||
|
pointer-events: auto;
|
||||||
|
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
background-color: rgb(153 153 255 / 10%);
|
||||||
|
|
||||||
|
border: 1px solid rgb(153 153 255 / 60%);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
|
||||||
|
opacity: 0.5;
|
||||||
|
|
||||||
|
transition: 0.3s ease;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -2,6 +2,7 @@
|
||||||
import { formatDate } from 'date-fns'
|
import { formatDate } from 'date-fns'
|
||||||
import chestAnimation from '~/assets/images/chest.webp'
|
import chestAnimation from '~/assets/images/chest.webp'
|
||||||
import { render } from 'vue'
|
import { render } from 'vue'
|
||||||
|
import { CodeControls } from '#components'
|
||||||
|
|
||||||
const config = useAppConfig()
|
const config = useAppConfig()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
@ -80,12 +81,7 @@ onMounted(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
|
content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
|
||||||
const icon = h('iconify-icon', {
|
const icon = h(CodeControls)
|
||||||
icon: 'mdi:content-copy',
|
|
||||||
inline: true,
|
|
||||||
class: 'button',
|
|
||||||
onClick: () => clipboard(pre),
|
|
||||||
})
|
|
||||||
|
|
||||||
render(icon, pre)
|
render(icon, pre)
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue