22 lines
753 B
Vue
22 lines
753 B
Vue
<script setup lang="ts">
|
||
// placement：12 个方位（4 主方向 × start/center/end），空间不足时自动翻转
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Popover, G3Segmented } from '@g3soft/ui'
|
||
|
||
const placement = ref('top')
|
||
const options = ['top', 'bottom', 'left', 'right', 'top-start', 'bottom-end']
|
||
</script>
|
||
|
||
<template>
|
||
<div style="display: flex; flex-direction: column; gap: 16px; align-items: center; padding: 40px">
|
||
<G3Segmented v-model="placement" :options="options" shape="round" />
|
||
|
||
<G3Popover :placement="placement" :offset="12">
|
||
<template #trigger>
|
||
<G3Button type="outline">打开气泡</G3Button>
|
||
</template>
|
||
<template #content>气泡内容</template>
|
||
</G3Popover>
|
||
</div>
|
||
</template>
|