Augma

主题

Dialog 对话框 ​

让注意力聚焦在当前操作，完成后回到原处。

基础用法 ​

查看 Vue 源码
Vue · TypeScript
<script setup lang="ts">
import { AgmButton, AgmDialog, AgmInput, AgmSelect } from 'augma'
import { shallowRef } from 'vue'

const open = shallowRef(false)
const name = shallowRef('Augma')
const mode = shallowRef('focus')
</script>

<template>
  <AgmDialog
    v-model:open="open"
    title="设备设置"
    description="调整设备名称，关闭后继续浏览。"
  >
    <template #trigger>
      <AgmButton variant="outline">打开设置</AgmButton>
    </template>
    <div class="example-stack">
      <AgmInput v-model="name" label="设备名称" />
      <AgmSelect v-model="mode" label="显示模式" :options="[{ label: '专注', value: 'focus' }, { label: '探索', value: 'explore' }]" />
    </div>
    <template #footer>
      <AgmButton @click="open = false">完成</AgmButton>
    </template>
  </AgmDialog>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API ​

属性类型默认值说明
openbooleanfalse通过 v-model:open 更新
titlestring必填可访问标题
descriptionstring必填操作说明

事件 ​

  • update:open(boolean)

插槽 ​

  • trigger：单个可聚焦触发元素
  • default：内容
  • footer：操作区

键盘操作与使用边界 ​

打开后焦点进入对话框，Tab 循环，Escape 关闭并返回触发器。推荐使用 trigger 插槽保证焦点返回。

安装 ​

ts
import { AgmDialog } from 'augma'
import 'augma/style.css'

复制可编辑源码：

sh
pnpm dlx shadcn-vue@2.8.2 add https://augma.yunyoujun.cn/r/dialog.json