弹窗与浮层

弹窗和浮层用于「在不离开当前页的情况下，展示额外内容或让用户确认操作」。Nuxt UI 提供 UModal（模态框）、UDrawer（侧滑抽屉）、UPopover（气泡卡片）、UTooltip（文字提示）四种，都是以 v-model:open 或 open 控制显隐。

本篇基于 /453.html 接好的环境，注意这些浮层组件依赖根容器 UApp（见 Nuxt UI 入门与安装）。

UModal 模态框

UModal 用 v-model:open 绑定一个布尔值控制开关，内部用插槽放内容。

<template>
  <UButton @click="open = true">打开弹窗</UButton>

  <UModal v-model:open="open" title="确认删除">
    <template #body>
      <p>此操作不可恢复，确定要删除吗？</p>
    </template>

    <template #footer>
      <div class="flex justify-end gap-2">
        <UButton variant="ghost" @click="open = false">取消</UButton>
        <UButton color="error" @click="confirm">删除</UButton>
      </div>
    </template>
  </UModal>
</template>

<script setup>
const open = ref(false)

function confirm() {
  open.value = false
}
</script>

title 是快捷标题属性；更细的内容放 #body、#footer 插槽。双向绑定 v-model:open 意味着点关闭按钮或遮罩，Nuxt UI 会自动把 open 设为 false。

UDrawer 侧滑抽屉

UDrawer 从屏幕一侧滑出，适合放较长的表单或筛选面板，用法和 UModal 几乎一致。

<template>
  <UButton @click="open = true">打开抽屉</UButton>

  <UDrawer v-model:open="open" title="筛选">
    <template #body>
      <p>这里放筛选条件，比如 [表单与输入](/455.html) 的内容。</p>
    </template>
  </UDrawer>
</template>

<script setup>
const open = ref(false)
</script>

UPopover 气泡卡片

UPopover 点击一个触发器后，在旁边弹出一个小卡片，适合「查看更多」「操作说明」这类场景。它用默认插槽放触发器，用 #content 放弹出内容。

<template>
  <UPopover>
    <UButton variant="soft" icon="i-lucide-info">说明</UButton>

    <template #content>
      <div class="p-3 text-sm">
        这里是弹出说明文字。
      </div>
    </template>
  </UPopover>
</template>

UTooltip 文字提示

UTooltip 更简单，鼠标悬停时显示一小段提示文字，常用于解释图标按钮的含义。

<template>
  <UTooltip text="删除这项">
    <UButton icon="i-lucide-trash" color="error" variant="ghost" square />
  </UTooltip>
</template>

text 直接写提示内容，被包裹的元素就是触发对象。

四种怎么选

常见问题

参考资料

• Nuxt UI Modal 文档
• Nuxt UI Drawer 文档
• Nuxt UI Popover 文档
• Nuxt UI Tooltip 文档