1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Ant Design Vue V3 Modal 对话框

Ant Design Vue V3 Modal 对话框

时间:2020-07-09 00:44:40

相关推荐

Ant Design Vue V3 Modal 对话框

模态对话框。

何时使用#

需要用户处理事务,又不希望跳转页面以致打断工作流程时,可以使用Modal在当前页面正中打开一个浮层,承载相应的操作。

另外当需要一个简洁的确认框询问用户时,可以使用Modal.confirm()等语法糖方法。

API#

#

事件#

注意#

<Modal />默认关闭后状态不会自动清空, 如果希望每次打开都是新内容,请设置destroyOnClose

Modal.method()#

包括:

Modal.infoModal.successModal.errorModal.warningModal.confirm

以上均为一个函数,参数为 object,具体属性如下:

以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。

const modal = Modal.info();modal.update({title: '修改的标题',content: '修改的内容',});modal.destroy();

Modal.destroyAll

使用Modal.destroyAll()可以销毁弹出的确认窗(即上述的Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm)。通常用于路由监听当中,处理路由前进、后退不能销毁确认对话框的问题,而不用各处去使用实例的返回值进行关闭(modal.destroy() 适用于主动关闭,而不是路由这样被动关闭)

const router = new VueRouter({ ... })// router changerouter.beforeEach((to, from, next) => {Modal.destroyAll();})

FAQ#

为什么 Modal 方法不能获取 全局注册组件、context、vuex 等内容和 ConfigProviderlocale/prefixCls配置, 以及不能响应式更新数据 ?#

直接调用 Modal 方法,组件会通过Vue.render动态创建新的 Vue 实体。其 context 与当前代码所在 context 并不相同,因而无法获取 context 信息。

当你需要 context 信息(例如使用全局注册的组件)时,可以通过appContext属性传递当前组件 context, 当你需要保留属性响应式时,你可以使用函数返回:

import { getCurrentInstance } from 'vue';const appContext = getCurrentInstance().appContext;const title = ref('some message');Modal.confirm({title: () => title.value, // 此时 title 的改变,会同步更新 confirm 中的 titleappContext,});

<template><div><a-button type="primary" @click="showModal">Open Modal</a-button><a-modal v-model:visible="visible" title="Basic Modal" @ok="handleOk"><p>Some contents...</p><p>Some contents...</p><p>Some contents...</p></a-modal></div></template><script>import { defineComponent, ref } from 'vue';export default defineComponent({setup() {const visible = ref(false);const showModal = () => {visible.value = true;};const handleOk = e => {console.log(e);visible.value = false;};return {visible,showModal,handleOk,};},});</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。