62 lines
1.5 KiB
Vue
62 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaQuery } from "@vueuse/core";
|
|
import type { HTMLAttributes } from "vue";
|
|
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger
|
|
} from "@/components/ui/tooltip";
|
|
|
|
const props = defineProps<{
|
|
side?: "top" | "right" | "bottom" | "left";
|
|
align?: "start" | "center" | "end";
|
|
open?: boolean;
|
|
class?: HTMLAttributes["class"];
|
|
}>();
|
|
|
|
const isMobile = useMediaQuery("(max-width: 640px)");
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<!-- 移动端 Popover -->
|
|
<Popover v-if="isMobile">
|
|
<PopoverTrigger as-child>
|
|
<slot name="trigger" />
|
|
</PopoverTrigger>
|
|
<PopoverContent
|
|
:side="side"
|
|
:align="align"
|
|
class="w-fit px-0 py-2 relative top-2! rounded-lg! border-none!"
|
|
:class="props.class"
|
|
>
|
|
<slot />
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<!-- PC Tooltip -->
|
|
<TooltipProvider v-else :delay-duration="150">
|
|
<Tooltip>
|
|
<TooltipTrigger as-child>
|
|
<slot name="trigger" />
|
|
</TooltipTrigger>
|
|
<TooltipContent
|
|
:side="side"
|
|
:align="align"
|
|
class="w-fit px-0 py-2 relative top-2! bg-popover text-popover-foreground border rounded-lg! [&>svg]:hidden [&>span>svg]:opacity-0!"
|
|
:class="props.class"
|
|
>
|
|
<slot />
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</div>
|
|
</template>
|