最近在使用element-ui框架,用到了Dialog对话框组件,大致实现的效果,跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下,下面本文会带着大家手摸手实现一个弹窗组件。
本文主要内容会涉及到弹窗遮罩的实现, slot 插槽的使用方式, props 、 $emit 传参,具体组件代码也传上去了。如果喜欢的话可以点波赞/关注,支持一下,希望大家看完本文可以有所收获。
组件最后实现的效果
实现步骤
- 先搭建组件的html和css样式,遮罩层和内容层。
- 定制弹窗内容:弹窗组件通过 slot 插槽接受从父组件那里传过来弹窗内容。
- 定制弹窗样式:弹窗组件通过 props 接收从父组件传过来的弹窗宽度,上下左右的位置。
- 组件开关:通过父组件传进来的 props 控制组件的显示与隐藏,子组件关闭时通过事件 $emit 触发父组件改变值。
1.搭建组件的html和css样式。
html结构:一层遮罩层,一层内容层,内容层里面又有一个头部title和主体内容和一个关闭按钮。
下面是组件中的html结构,里面有一些后面才要加进去的东西,如果看不懂的话可以先跳过,
下面是组件中的主要的css样式,里面都做了充分的注释,主要通过 z-index 和 background 达到遮罩的效果,具体内容的css可以根据自己的需求来设置。
2. 通过 slot 定制弹窗内容
这一步,只要理解了 slot 的作用以及用法,就没有问题了。
单个插槽:
ps:如果子组件里面包含 slot 插槽,那么上面的p标签的内容将会被丢弃。
具名插槽:
所谓的具名插槽,即为 slot 标签赋一个 name 属性,具名插槽可以父组件中不同的内容片段放到子组件的不同地方,具名插槽还是可以拥有一个默认插槽。下面可以看一下弹窗组件插槽的使用方式:
在父组件中的使用方式:
将弹窗组件引入要使用的组件中,并通过 components 注册成为组件。 父组件中弹窗组件插槽的使用方法如下。
<div slot="header">插入到name为header的slot标签里面
<div class="dialog_publish_main" slot="main">
这里是内容插入到子组件的slot的name为main里面,可以在父组件中添加class定义样式,事件类型等各种操作