25 lines
895 B
Vue
25 lines
895 B
Vue
<script setup lang="ts">
|
|
// arrow 控制箭头；followTriggerWidth 让浮层宽度以触发器为下限（表单类控件常用）
|
|
import { G3Button, G3Popover, G3Space } from '@g3soft/ui'
|
|
</script>
|
|
|
|
<template>
|
|
<G3Space direction="vertical" :size="40" style="display: flex; align-items: center; padding: 60px 20px">
|
|
<G3Popover :arrow="false" placement="bottom">
|
|
<template #trigger><G3Button type="outline">无箭头</G3Button></template>
|
|
<template #content>浮层内容</template>
|
|
</G3Popover>
|
|
|
|
<div style="width: 320px">
|
|
<G3Popover follow-trigger-width placement="bottom-start">
|
|
<template #trigger>
|
|
<div style="padding: 8px 12px; border: 1px solid #d9d9d9; border-radius: 6px">
|
|
触发器
|
|
</div>
|
|
</template>
|
|
<template #content>浮层内容</template>
|
|
</G3Popover>
|
|
</div>
|
|
</G3Space>
|
|
</template>
|