景点击新增与编辑都弹框出来进行填写功能上大同小异可能只是标题内容或者是显示的主体内容稍微不同

这时候就没必要写两个组件只需要根据传入的参数不同组件显示不同内容即可

这样下次开发相同界面程序时就可以写更少的代码意义着更高的开发效率更少的

Bug

除了通过引入import的形式我们还可通过API的形式进行组件的调用

三、实现流程

classmodaldivclassmask:stylestyleclickmaskClose

!loading

}}/spanspanv-ifclose:titlet(r.close)classcloseclick!loading

v-iftypeof

并且从DOM结构上来看把modal该有的内容遮罩层、标题、内容、底部按钮都实现了

关于主体内容

/div可以看到根据传入content的类型不同对应显示不同得到内容

默认插槽

在Vue2中我们可以借助Vue实例以及Vue.extend的方式获得组件实例然后挂载到body上

import

document.body.appendChild(instance.$el);虽然Vue3移除了Vue.extend方法但可以通过createVNode实现

import

document.body.appendChild(container);在Vue2中可以通过this的形式调用全局

API

概念了需要调用app.config.globalProperties挂载到全局

export

{app.config.globalProperties.$create

create}

下面再看看看Modal组件内部是如何处理「确定」「取消」事件的既然是Vue3当然采用Compositon

API

{ctx.emit(on-confirm);instance._hub[on-confirm]();};const

handleCancel

{ctx.emit(on-cancel);ctx.emit(update:modelValue,

false);instance._hub[on-cancel]();};return

}在上面代码中可以看得到除了使用传统emit的形式使父组件监听还可通过_hub属性中添加

on-cancelon-confirm方法实现在API中进行监听

app.config.globalProperties.$modal

{show({})

app.config.globalProperties.$modal

{show({/*

false;container.parentNode!.removeChild(container);};//

_hub

发生错误时不关闭弹框console.error(err);props.loading

false;}}

关于组件实现国际化、与typsScript结合大家可以根据自身情况在此基础上进行更改

参考文献

https://segmentfault.com/a/1190000038928664