color: #2e2c2d;
font-size: 16px;
}
// 遮罩 设置背景层，z-index值要足够大确保能覆盖，高度 宽度设置满 做到全屏遮罩
.dialog-cover {
background: rgba(0,0,0, 0.8);
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
// 内容层 z-index要比遮罩大，否则会被遮盖，
.dialog-content{
position: fixed;
top: 35%;
// 移动端使用felx布局
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 300;
}
</style>
2. 通过 slot 定制弹窗内容
这一步，只要理解了 slot 的作用以及用法，就没有问题了。
单个插槽：
<slot>这是在没有slot传进来的时候，才显示的弹窗内容</slot>
上面是单个插槽也叫默认插槽，在父组件中使用插槽的正确姿势：
<my-component>
<!--在my-component里面的所有内容片段都将插入到slot所在的DOM位置，并且会替换掉slot标签-->
<!--这两个p标签，将替换整个slot标签里面的内容-->
<p>这是一些初始内容</p>
<p>这是更多的初始内容</p>
</my-component>ps:如果子组件里面包含 slot 插槽，那么上面的p标签的内容将会被丢弃。
具名插槽：
所谓的具名插槽，即为 slot 标签赋一个 name 属性，具名插槽可以父组件中不同的内容片段放到子组件的不同地方，具名插槽还是可以拥有一个默认插槽。下面可以看一下弹窗组件插槽的使用方式：
<div class="dialog_head back ">
<!--弹窗头部 title-->
<slot name="header">提示信息</slot>
</div>
<div class="dialog_main " :style="{paddingTop:pdt+'px',paddingBottom:pdb+'px'}">
<!--弹窗的内容-->
<slot name="main">弹窗内容</slot>
</div>在父组件中的使用方式：
将弹窗组件引入要使用的组件中，并通过 components 注册成为组件。
父组件中弹窗组件插槽的使用方法如下。
<dialogComponent> <div slot="header">插入到name为header的slot标签里面</div>
<div class="dialog_publish_main" slot="main">
这里是内容插入到子组件的slot的name为main里面，可以在父组件中添加class定义样式，事件类型等各种操作
</div>
</dialogComponent>
关于组件中用到的插槽的介绍就到这里了，插槽在弹窗组件中的应用是一个典型的栗子，可以看到插槽作用相当强大，而插槽本身的使用并不难，同学们爱上插槽了没有？
