关于如何用Vue实现弹窗——一个简单的组件实现

//设置位置在最外层.dialog{position:relative;颜色：#2e2c2d；字体大小：16px；}//Mask设置背景层，z-index值必须足够大以保证覆盖，高和宽设置为全屏以实现全屏mask.dialog-cover{background:rgba(0,0,0,0.8);位置：固定；z-指数：200；顶部：0；左：0；宽度：100%；高度：100%；}//内容层的z-index必须大于mask，否则会被覆盖，.dialog-content{position:fixed;顶部：35%；//移动端使用felx布局display:flex;弹性方向：列；证明内容：居中；对齐项目：居中；z-index:300;前言最近在使用element-ui框架和Dialog对话框组件。大概的效果是我之前在手机项目中做的那个。弹出窗口组件类似。然后就想着把这个弹窗组件的实现分享给大家。下面这篇文章就带大家动手实现一个弹窗组件。这篇文章的主要内容会涉及弹窗遮罩的实现，slotslot、props、$emit参数的使用，具体的组件代码也上传了。喜欢的话可以点赞/关注，支持一下。希望你看完这篇文章后有所收获。看一下我的个人博客：obkoro1.com组件的最终效果实现步骤首先构建组件的html和css样式，遮罩层和内容层。自定义弹窗内容：弹窗组件通过slot槽接受父组件传来的弹窗内容。自定义弹窗样式：弹窗组件通过props接收父组件传来的弹窗宽度、上下左右位置。组件开关：从父组件传入的props控制组件的显示和隐藏。当子组件关闭时，事件$emit触发父组件改变值。1.构建组件的html和css样式。HTML结构：一层遮罩层，一层内容层，内容层里面有一个header标题，主要内容和一个关闭按钮。以下是组件中的html结构。有一些东西会在以后补充。不懂的可以先跳过。下面是组件中主要的css样式，注释很全，主要是效果掩蔽是通过z-index和背景实现的。具体内容的css可以根据自己的需要设置。//设置位置在最外层.dialog{position:relative;颜色：#2e2c2d；字体大小：16px；}//Mask设置背景层，z-index值必须足够大以保证覆盖，高和宽设置为全屏以实现全屏mask.dialog-cover{background:rgba(0,0,0,0.8);位置：固定；z-指数：200；顶部：0；左：0；宽度：100%；高度：100%；}//内容层的z-index必须大于mask，否则会被覆盖，.dialog-content{position:fixed;顶部：35%；//移动端使用felx布局display:flex;弹性方向：列；证明内容：居中；对齐项目：居中；z-index:300;---2.在通过槽位自定义弹窗内容的步骤中，只要了解槽位的作用和用法，就没有问题。单槽：这是没有传入槽时才显示的弹窗内容上面是单槽，也叫默认槽，使用槽的正确姿势在父组件中：

Thisissomeinitialcontent

Thisismoreinitialcontent

ps:如果子组件包含slots，那么上面p标签的内容就会被丢弃。Namedslot：所谓namedslot就是给slot标签赋予一个name属性。namedslot可以将父组件中不同的内容片段放在子组件的不同位置。命名槽仍然可以有一个默认槽。下面看一下弹窗组件slot的使用方法：提示信息