2023-01-21_Modal对话框

前言

• 当需要用户处理数据，又不希望跳转页面，可以使用Modal打开一个浮层。
• 可以很复杂包含很多东西。

1. 快捷方法

• 包含Modal.info，Modal.success，Modal.error，Modal.warning，Modal.confirm。
• 以上均为一个函数，参数为 object，常用属性如下：

content 
title
cancelText 取消按钮的文字
centered 垂直居中展示 Modal
okText 确认按钮文字
autoFocusButton 指定自动获得焦点的按钮 null | ok | cancel
onCancel 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭
onOk 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭

• 快捷方法用的比较多。所以注册成全局属性会更方便。
  main.js

import { Modal } from 'ant-design-vue';
app.config.globalProperties.$Modal = Modal

使用

this.$Modal.error({title: '数据请求失败', autoFocusButton: "ok", zIndex: 20})

效果：

image.png

2.

3.

4.

参考文章

1. Modal 对话框