前沿
这个组件是笔者自己做笔记使用的,方便以后开发。
就是有一个大的黑色的遮罩层,然后在有弹窗内容
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>