djangoadmin/djangoadmin-wiki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

签入版本

Browse Source
This commit is contained in:
gitadmin
2026-09-16 16:30:26 +08:00
parent c97d87847f
commit 67b91442fb
52 changed files with 2089 additions and 412 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DjangoAdmin_Tornado_AntdVue/zh/volume4/frontend/modal.md
+26 -26
View File
@@ -1,7 +1,7 @@
# Modal 弹窗
:::tip 说明
项目提供 `BasicModal` 组件（`src/components/Modal/src/BasicModal.vue`）和原生 `el-dialog` 两种弹窗用法。编辑弹窗通过 `defineAsyncComponent` 懒加载，减少首屏渲染负担。
项目提供 `BasicModal` 组件（`src/components/Modal/src/BasicModal.vue`）和原生 `a-modal` 两种弹窗用法。编辑弹窗通过 `defineAsyncComponent` 懒加载，减少首屏渲染负担。
:::
## 组件架构
@@ -9,7 +9,7 @@
```
src/components/Modal/
├── src/
│ ├── BasicModal.vue # 主组件（基于 el-dialog）
│ ├── BasicModal.vue # 主组件（基于 a-modal）
│ ├── props.ts # 属性定义
│ ├── type.ts # 类型定义（ModalProps、ModalMethods）
│ └── hooks/
@@ -19,7 +19,7 @@ src/components/Modal/
## BasicModal 组件
`BasicModal` 基于 `el-dialog` 封装，提供全屏切换、自定义头部、提交按钮等能力：
`BasicModal` 基于 `a-modal` 封装，提供全屏切换、自定义头部、提交按钮等能力：
```vue
<BasicModal :title="'编辑'" :width="600" @register="registerModal" @ok="handleSubmit">
@@ -36,7 +36,7 @@ src/components/Modal/
## 实际用法（position 模块）
以岗位管理为例，实际使用原生 `el-dialog` + `defineAsyncComponent` 懒加载：
以岗位管理为例，实际使用原生 `a-modal` + `defineAsyncComponent` 懒加载：
### 父组件（index.vue）
@@ -81,36 +81,36 @@ const handleEdit = async (record: Recordable) => {
```vue
<!-- src/views/system/position/edit.vue -->
<template>
<el-dialog
<a-modal
v-model="props.visible"
:title="props.positionId ? '编辑' : '新增'"
width="500"
:close-on-click-modal="false"
:before-close="dialogClose"
:mask-closable="false"
>
<el-form class="ls-form" ref="formRef" :model="formData" label-width="80px">
<el-form-item
<a-form class="ls-form" ref="formRef" :model="formData" :label-col="{ style: { width: '80px' } }">
<a-form-item
label="岗位名称"
prop="name"
:rules="{ required: true, message: '请输入岗位名称', trigger: 'blur' }"
>
<el-input v-model="formData.name" placeholder="请输入岗位名称" clearable />
</el-form-item>
<el-form-item label="岗位状态" prop="status">
<el-radio-group v-model="formData.status">
<el-radio :value="1">正常</el-radio>
<el-radio :value="2">停用</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="排序" prop="sort">
<el-input-number v-model="formData.sort" />
</el-form-item>
</el-form>
<a-input v-model:value="formData.name" placeholder="请输入岗位名称" allow-clear />
</a-form-item>
<a-form-item label="岗位状态" name="status">
<a-radio-group v-model:value="formData.status">
<a-radio :value="1">正常</a-radio>
<a-radio :value="2">停用</a-radio>
</a-radio-group>
</a-form-item>
<a-form-item label="排序" name="sort">
<a-input-number v-model:value="formData.sort" />
</a-form-item>
</a-form>
<template #footer>
<el-button @click="dialogClose">取消</el-button>
<el-button :loading="subLoading" type="primary" @click="submit">确定</el-button>
<a-button @click="dialogClose">取消</a-button>
<a-button :loading="subLoading" type="primary" @click="submit">确定</a-button>
</template>
</el-dialog>
</a-modal>
</template>
<script lang="ts" setup>
@@ -190,7 +190,7 @@ async function handleDelete(record: Recordable) {
}
```
`confirm` 内部调用 `ElMessageBox.confirm`，返回 Promise，用户取消时抛出异常中断后续逻辑。
`confirm` 内部调用 `messageBox.confirm`，返回 Promise，用户取消时抛出异常中断后续逻辑。
## v-model:visible 双向绑定
@@ -213,4 +213,4 @@ const dialogClose = () => { emit('update:visible', false); };
## 总结
编辑弹窗使用 `el-dialog` + `defineAsyncComponent` 懒加载，通过 `v-model:visible` 双向绑定显隐状态，`useLockFn` 防重复提交。父组件通过 `positionId` prop 传递编辑行 ID，子组件在 `onMounted` 中判断并加载详情数据。操作成功后 `emit('success')` 通知父组件刷新表格。
编辑弹窗使用 `a-modal` + `defineAsyncComponent` 懒加载，通过 `v-model:visible` 双向绑定显隐状态，`useLockFn` 防重复提交。父组件通过 `positionId` prop 传递编辑行 ID，子组件在 `onMounted` 中判断并加载详情数据。操作成功后 `emit('success')` 通知父组件刷新表格。