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>` 组件标签。
|