41 lines
1.4 KiB
Vue
41 lines
1.4 KiB
Vue
<script setup lang="ts">
|
||
// trigger：click（默认）/ hover / focus / contextmenu / manual（完全受控）
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Popover, G3Space } from '@g3soft/ui'
|
||
|
||
const manualOpen = ref(false)
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="[16, 12]" align="center" wrap>
|
||
<G3Popover trigger="hover">
|
||
<template #trigger><G3Button type="outline">hover 触发</G3Button></template>
|
||
<template #content>鼠标移入即显示，移出后延迟关闭</template>
|
||
</G3Popover>
|
||
|
||
<G3Popover trigger="focus">
|
||
<template #trigger><G3Button type="outline">focus 触发</G3Button></template>
|
||
<template #content>Tab 聚焦时显示，焦点移出关闭</template>
|
||
</G3Popover>
|
||
|
||
<G3Popover trigger="contextmenu">
|
||
<template #trigger>
|
||
<div style="padding: 12px 20px; border: 1px dashed #d9d9d9; border-radius: 6px">
|
||
在此处右键
|
||
</div>
|
||
</template>
|
||
<template #content>在鼠标位置弹出，超出视口会自动回退</template>
|
||
</G3Popover>
|
||
|
||
<!-- manual：开关完全由业务控制 -->
|
||
<G3Popover trigger="manual" :open="manualOpen">
|
||
<template #trigger>
|
||
<G3Button type="outline" @click="manualOpen = !manualOpen">manual 触发</G3Button>
|
||
</template>
|
||
<template #content>
|
||
<G3Button size="small" @click="manualOpen = false">手动关闭</G3Button>
|
||
</template>
|
||
</G3Popover>
|
||
</G3Space>
|
||
</template>
|