vue-dialog的弹出层组件

2018-12-31

编程之家收集整理的这篇文章主要介绍了vue-dialog的弹出层组件，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

本文章通过实现一个vue-dialog的弹出层组件，然后附加说明如果发布此包到npm，且能被其他项目使用。

功能说明

多层弹出时，只有一个背景层。

弹出层嵌入内部组件。

弹出层按钮支持回调

实现

多层弹出时，只有一个背景层

利用两个组件实现，一个背景层组件(只提供一个背景层，组件名：background.vue)，一个弹出层内容管理组件(实现多个内容层的管理，组件名：master.vue)。

弹出层嵌入内部组件

使用vue的component组件实现，他可以完美支持。

弹出层按钮支持回调

在master.vue中实现，详细解析此代码

html代码

header

{ {btn.text}}

comps：内部组件的集合

realIndex：一个computed属性，读取props的mIndex属性，表示内部层的zIndex层级关系。

component加载组件

btn