65 lines
1.7 KiB
Markdown
65 lines
1.7 KiB
Markdown
|
---
|
|||
|
|
name: arco-vue-modal-patterns
|
|||
|
|
description: "Arco Design Vue 弹窗与反馈模式。用于 `a-modal`、`v-model:visible`、确认流程、弹窗表单、Message、Notification 和 Drawer。"
|
|||
|
|
user-invocable: false
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# 弹窗与反馈模式
|
|||
|
|
|
|||
|
|
详细 API 参考 [modal.md](../components/feedback/modal.md)、[drawer.md](../components/feedback/drawer.md) 和 [message.md](../components/feedback/message.md)。
|
|||
|
|
|
|||
|
|
## 受控弹窗
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref } from 'vue';
|
|||
|
|
|
|||
|
|
const visible = ref(false);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<a-button type="primary" @click="visible = true">打开</a-button>
|
|||
|
|
<a-modal v-model:visible="visible" title="编辑">
|
|||
|
|
<p>内容</p>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 弹窗内表单
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { reactive, ref } from 'vue';
|
|||
|
|
import { Message } from '@arco-design/web-vue';
|
|||
|
|
|
|||
|
|
const visible = ref(false);
|
|||
|
|
const form = reactive({ name: '' });
|
|||
|
|
|
|||
|
|
const handleBeforeOk = async () => {
|
|||
|
|
if (!form.name) {
|
|||
|
|
Message.error('请输入名称');
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
Message.success('保存成功');
|
|||
|
|
return true;
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<a-modal v-model:visible="visible" title="编辑" :on-before-ok="handleBeforeOk">
|
|||
|
|
<a-form :model="form" layout="vertical">
|
|||
|
|
<a-form-item field="name" label="名称" required>
|
|||
|
|
<a-input v-model="form.name" />
|
|||
|
|
</a-form-item>
|
|||
|
|
</a-form>
|
|||
|
|
</a-modal>
|
|||
|
|
</template>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 使用要点
|
|||
|
|
|
|||
|
|
- 弹窗和抽屉的可见性使用 `v-model:visible`。
|
|||
|
|
- 异步确认、表单校验、关闭拦截使用文档中的 `on-before-ok` 或关闭前钩子。
|
|||
|
|
- 轻量结果反馈使用 `Message`；需要标题、正文或更复杂内容时使用 `Notification`。
|
|||
|
|
- `Message` 和 `Notification` 是全局服务 API，不是 `<a-message>` 或 `<a-notification>` 组件标签。
|