25 lines
997 B
Vue
25 lines
997 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>arrow=false 时没有尖角，适合菜单类浮层</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">
|
||
触发器（320px 宽）
|
||
</div>
|
||
</template>
|
||
<template #content>浮层宽度跟随触发器，内容更长时会自动变宽</template>
|
||
</G3Popover>
|
||
</div>
|
||
</G3Space>
|
||
</template>
|