vue 移动端 全屏幕弹窗公共组件

前沿

这个组件是笔者自己做笔记使用的，方便以后开发。

---

就是有一个大的黑色的遮罩层，然后在有弹窗内容

step 一 首先在components文件夹下新建一个文件夹，里边包含有这个公共组件所需的文件，img,index.js,index.vue

首先来看看index.vue

<template>
    <transition name="fade">
    <div id="luckyDraw">
        <div class="slotContent">
    //slot   方便外边的内容插入，所有弹窗都可以用，这里只写公共的部分
            <slot name="luckyDrawCenter"></slot>
            <div class="closeButton"><img src="./img/closeicon.png" @click="closeButton">