摘要：前言最近在使用框架，用到了对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。
前言
最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家分享一下，下面本文会带着大家手摸手实现一个弹窗组件。
本文主要内容会涉及到弹窗遮罩的实现，slot插槽的使用方式，props、$emit传参，具体组件代码也传上去了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。
个人博客了解一下：obkoro1.com组件最后实现的效果 实现步骤
先搭建组件的html和css样式，遮罩层和内容层。
定制弹窗内容：弹窗组件通过slot插槽接受从父组件那里传过来弹窗内容。
定制弹窗样式：弹窗组件通过props接收从父组件传过来的弹窗宽度，上下左右的位置。
组件开关：通过父组件传进来的props控制组件的显示与隐藏，子组件关闭时通过事件$emit触发父组件改变值。
1.搭建组件的html和css样式。html结构：一层遮罩层，一层内容层，内容层里面又有一个头部title和主体内容和一个关闭按钮。
下面是组件中的html结构，里面有一些后面才要加进去的东西，如果看不懂的话可以先跳过，
提示信息 弹窗内容
下面是组件中的主要的css样式，里面都做了充分的注释，主要通过z-index和background达到遮罩的效果，具体内容的css可以根据自己的需求来设置。
---
2. 通过slot定制弹窗内容这一步，只要理解了slot的作用以及用法，就没有问题了。
单个插槽：这是在没有slot传进来的时候，才显示的弹窗内容
上面是单个插槽也叫默认插槽，在父组件中使用插槽的正确姿势：
这是一些初始内容
这是更多的初始内容
ps:如果子组件里面包含slot插槽，那么上面的p标签的内容将会被丢弃。
具名插槽：所谓的具名插槽，即为slot标签赋一个name属性，具名插槽可以父组件中不同的内容片段放到子组件的不同地方，具名插槽还是可以拥有一个默认插槽。下面可以看一下弹窗组件插槽的使用方式：
提示信息 弹窗内容
在父组件中的使用方式：
将弹窗组件引入要使用的组件中，并通过components注册成为组件。
父组件中弹窗组件插槽的使用方法如下。
关于组件中用到的插槽的介绍就到这里了，插槽在弹窗组件中的应用是一个典型的栗子，可以看到插槽作用相当强大，而插槽本身的使用并不难，同学们爱上插槽了没有？
---
3.通过props控制弹窗显隐&&定制弹窗stylepsops是Vue中父组件向子组件传递数据的一种方式，不熟悉的小伙伴们可以看一下props文档。
因为弹窗组件都是引到别的组件里面去用的，为了适合不同组件场景中的弹窗，所以弹窗组件必须具备一定的可定制性，否则这样的组件将毫无意义,下面介绍一下props的使用方式，以弹窗组件为例：
首先需要在被传入的组件中定义props的一些特性，验证之类的。
然后在父组件中绑定props数据。
父组件中使用方式：
ps：props传递数据不是双向绑定的，而是单向数据流，父组件的数据变化时，也会传递到子组件中，这就意外着我们不应该在子组件中修改props。所以我们在关闭弹窗的时候就需要通过$emit来修改父组件的数据，然后数据会自动传到子组件中。
现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。
4.$emit触发父组件事件修改数据，关闭弹窗Vue中在子组件往父组件传参，很多都是通过$emit来触发父组件的事件来修改数据。
在子组件中，在点击关闭，或者遮罩层的时候触发下面这个方法：
methods: {
closeMyself() {
this.$emit("on-close");
//如果需要传参的话，可以在"on-close"后面再加参数，然后在父组件的函数里接收就可以了。
}
}
父组件中的写法：
//"on-close是监听子组件的时间有没有触发，触发的时候执行closeDialog函数 methods:{ closeDialog(){ // this.status.isShowPublish=false; //把绑定的弹窗数组 设为false即可关闭弹窗 }, }
可以用弹窗组件实现下列这种信息展示，或者事件交互：
弹窗组件代码上面是把弹窗的每个步骤拆分开来，一步步解析的，每一步都说的比较清楚了，具体连起来的话，可以看看代码，再结合文章就能理的很清楚了。
小结：这个弹窗组件，实现起来一点都不难，我这里主要是提供了一个实现方式，当项目中有需要的话，大家也可以自己撸一个出来，以上就是本文的内容了，希望同学们看完能有所收获。
希望看完的朋友可以点个喜欢，也可以关注一下我，您的支持是对我最大的鼓励。
最后：如需转载，请放上原文链接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的不好之处，不撕逼，但是欢迎指点。
个人blog and 掘金个人主页
以上2018.4.21
参考资料：Vue文档-插槽
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113123.html
摘要：前言最近在使用框架，用到了对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。 前言 最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家...
摘要：前言最近在使用框架，用到了对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。现在基本上弹窗组件都已实现的差不多了，还差一个弹窗的关闭事件，这里就涉及到子组件往父组件传参了。 前言 最近在使用element-ui框架，用到了Dialog对话框组件，大致实现的效果，跟我之前自己在移动端项目里面弄的一个弹窗组件差不太多。然后就想着把这种弹窗组件的实现方式与大家...
摘要：在组件内，我们触及不到组件的模板，所以简单的在动态模板上添加并不能完成事件监听。简单来说，依赖收集是在渲染函数渲染的函数中进行的，在中一旦通过使用了这个变量，通过这个变量的就收集到了正在执行的渲染函数这一个依赖。 作为一个中后台表单&表格工程师，经常需要在一个页面中处理多个弹窗。我自己的项目中，一个复杂的审核页面中的弹窗数量超过了30个，如何管理大量的弹窗就成为了一个需要考虑的问题。 ...
摘要：基于开发的插件包含仿照原生样式来源一些想法刚开始的时候想要用现成的弹窗组件来着但是查找一圈没有发现比较合适项目的所以才自己开发了一个包含四种并且可以单个引入的组件开发实际上比较简单有兴趣的可以看下源码实现步骤很清晰关于样式的问题是直接从魅 wc-messagebox 基于 vue 2.0 开发的插件 包含 Alert, Confirm, Toast, Prompt 仿照 iOS 原生...
摘要：仿滴滴出行项目最近，各大社区出现很多小伙伴的项目，趁着这股热潮我也用撸了一个滴滴出行的项目。可是，后来在手机上发现，输入的时候居然调不出软键盘，写项目的时候没考虑到设备问题，简直是大大的失误。也就是说可以在组件内部进行请求，不需要提交。 Vue2.0 仿滴滴出行项目 最近，各大社区出现很多小伙伴的vue项目，趁着这股热潮我也用vue撸了一个滴滴出行的项目。 效果预览 showImg(h...
阅读 2737·2023-04-25 18:46
阅读 644·2021-11-19 09:40
阅读 2021·2021-09-28 09:36
阅读 3272·2021-09-10 11:11
阅读 3415·2019-08-30 15:55
阅读 1753·2019-08-30 15:54
阅读 2551·2019-08-29 16:16
阅读 3478·2019-08-29 15:08
