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

2,033 阅读2分钟

前沿

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


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

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"></div>
        </div>
    </div>
    </transition>
</template>

<script>
export default {
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        closeButton() {
            this.$emit("fromChild");
        }
    }
}
</script>

<style lang="less" scoped>
//加入过渡效果   渐隐渐显
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.8s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}
#luckyDraw {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    .slotContent {
        .closeButton {
            margin-top: 0.5rem;
            img{
                width: 0.72rem;
                height: 0.72rem;
            }
        }
    }
}
</style>

index.js 方便将该组件导出成为全局组件

import luckyDrawToast from './index.vue'
const DrawToast = {
    install:function(Vue){
        Vue.component('DrawToast',luckyDrawToast)     //注册该组件
    }
}
export default DrawToast

step 二 然后在main.js里设置好,之后在需要用的页面直接写标签就可以了

main.js

import DrawToast from './components/luckyDrawToast/index'
Vue.use(DrawToast);

step 三 在使用页面

    <!-- 中奖纪录弹窗 -->
        <DrawToast v-show='isShowToast' @fromChild="fromChildFa">
            <div class="PosRela ToastImage" slot="luckyDrawCenter">
         //里边插入的内容就看你自己的 需求随便写就好了
                <WinningRecord :PrizeStatusText="PrizeStatusText"></WinningRecord>
            </div>
        </DrawToast>

.这里再补充一个使用css3 Anmation 切换背景图,以达到灯光闪烁的效果,

备注: 这里需要俩张亮点交相辉映的背景图。

     <!-- 九宫格抽奖区域 -->
        <div class="squaredCalligraphy Width100 PosRela">
        </div>
<style>
.squaredCalligraphy {
    animation: changeBg .5s ease infinite;
    height: 7.62rem;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
//在关键帧动画处设置两张相互交错的背景图就阔以了
@keyframes changeBg {
    0% {
        background-image: url(../img/jiugongge.png);
    }
    100% {
        background-image: url(../img/jiugongge.png);
    }
}
</style>