27 lines
845 B
Vue
27 lines
845 B
Vue
<script setup lang="ts">
|
||
// 受控用法：传 open 并监听 update:open，可做二次确认、埋点、权限拦截
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Message, G3Popover } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
|
||
function onOpenChange(value: boolean) {
|
||
if (value) G3Message.info('打开前可以做权限校验/埋点')
|
||
open.value = value
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<G3Popover :open="open" placement="bottom-start" @update:open="onOpenChange">
|
||
<template #trigger>
|
||
<G3Button type="outline">受控气泡</G3Button>
|
||
</template>
|
||
<template #content>
|
||
<div style="max-width: 200px">
|
||
<p style="margin: 0 0 8px">受控模式下，所有开关都经过 update:open。</p>
|
||
<G3Button size="small" @click="open = false">知道了</G3Button>
|
||
</div>
|
||
</template>
|
||
</G3Popover>
|
||
</template>
|