最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。

创新互联建站是一家专注网站建设、网络营销策划、小程序制作、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立十载以来，已经为数千家宴会酒店设计各业的企业公司提供互联网服务。现在，服务的数千家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

本文主要内容会涉及到弹窗遮罩的实现， slot 插槽的使用方式， props 、 $emit 传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

组件最后实现的效果

 

实现步骤

1. 先搭建组件的html和css样式，遮罩层和内容层。
2. 定制弹窗内容：弹窗组件通过 slot 插槽接受从父组件那里传过来弹窗内容。
3. 定制弹窗样式：弹窗组件通过 props 接收从父组件传过来的弹窗宽度，上下左右的位置。
4. 组件开关：通过父组件传进来的 props 控制组件的显示与隐藏，子组件关闭时通过事件 $emit 触发父组件改变值。
   

1.搭建组件的html和css样式。

html结构：一层遮罩层，一层内容层，内容层里面又有一个头部title和主体内容和一个关闭按钮。

下面是组件中的html结构，里面有一些后面才要加进去的东西，如果看不懂的话可以先跳过，

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章名称：使用Vue组件实现一个简单弹窗效果-创新互联
标题来源：http://cdweb.net/article/eship.html