本文章通过实现一个vue-dialog的弹出层组件,然后附加说明如果发布此包到npm,且能被其他项目使用。
功能说明
多层弹出时,只有一个背景层。 弹出层嵌入内部组件。 弹出层按钮支持回调
实现
多层弹出时,只有一个背景层
利用两个组件实现,一个背景层组件(只提供一个背景层,组件名:background.vue),一个弹出层内容管理组件(实现多个内容层的管理,组件名:master.vue)。 弹出层嵌入内部组件 使用vue的component组件实现,他可以完美支持。 弹出层按钮支持回调 在master.vue中实现,详细解析此代码
html代码
comps:内部组件的集合 realIndex:一个computed属性,读取props的mIndex属性,表示内部层的zIndex层级关系。 component加载组件 btns:表示按钮的集合,现还不支持组件独立配置按钮列表。 style:此方法用于生成内部组件居中的css代码。
js代码:
<div class="jb51code">
<pre class="brush:js;">