mirror of
https://github.com/fmhy/edit.git
synced 2026-01-31 04:11:02 +00:00
57 lines
1.7 KiB
Vue
57 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import { withBase } from 'vitepress'
|
|
import { computed } from 'vue'
|
|
|
|
const props = withDefaults(
|
|
defineProps<{ title?: string; icon?: string }>(),
|
|
{ icon: '/note.svg' }
|
|
)
|
|
|
|
const resolvedIcon = computed(() => withBase(props.icon))
|
|
</script>
|
|
|
|
<template>
|
|
<VDropdown :triggers="['click', 'touch']" :auto-hide="true" :distance="15" placement="auto">
|
|
<button
|
|
aria-label="Tooltip"
|
|
class="text-brand-1 relative inline-flex align-middle items-center justify-center leading-none p-0 select-none font-bold cursor-pointer transition-all h-[1em] w-[1.7em]"
|
|
>
|
|
<div
|
|
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-2.5 w-[1.6em] h-[1.6em] bg-current transition-all"
|
|
:style="{
|
|
mask: `url(${resolvedIcon}) no-repeat center / contain`,
|
|
'-webkit-mask': `url(${resolvedIcon}) no-repeat center / contain`,
|
|
}"
|
|
/>
|
|
</button>
|
|
|
|
<template #popper>
|
|
<div class="border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 max-w-md max-h-md border-2 border-solid flex flex-col transition-all overflow-hidden">
|
|
<div class="overflow-y-auto p-4">
|
|
<h3 v-if="title" class="text-$vp-c-text-1 mb-2 text-lg font-semibold" v-text="title" />
|
|
<div class="text-$vp-c-text-1 text-sm content vp-doc">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</VDropdown>
|
|
</template>
|
|
|
|
<style>
|
|
.v-popper__popper { --uno: z-5000; }
|
|
.v-popper { display: inline-flex !important; }
|
|
|
|
.v-popper--theme-dropdown .v-popper__inner {
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
border: none !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.vp-doc a.tooltip-source-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
</style>
|