一、首先创建一个双开门的蒙层组件
<!-- DoorOverlay.vue -->
<template><div v-if="isVisible" class="door-overlay"><div class="door left-door"></div><div class="door right-door"></div></div></template><script>export default {data() {return {isVisible: false};},methods: {show() {this.isVisible = true;},hide() {this.isVisible = false;}}};</script><style scoped>.door-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;/* background-color: rgba(0, 0, 0, 0.5); */z-index: 9999;overflow: hidden;}.door {width: 50%;height: 100%;background-color: #4891DA;transition: transform 0.5s;}.left-door {transform: translateX(0);}.right-door {transform: translateX(0);}.door-overlay.hide .left-door {transform: translateX(-100%);}.door-overlay.hide .right-door {transform: translateX(100%);}</style>
二、在router的index.js文件中引用
import Vue from 'vue'
import VueRouter from 'vue-router'import DoorOverlay from '@/components/DoorOverlay'Vue.use(VueRouter)const router = new VueRouter({mode: 'hash',routes:[ {path: '/',// 默认打开后就是这个主页component: () => import('@/components/Home/Home'),}]}) // 创建 DoorOverlay 实例
const doorOverlay = new Vue(DoorOverlay).$mount();
document.body.appendChild(doorOverlay.$el);// 全局前置守卫
router.beforeEach((to, from, next) => {doorOverlay.show();setTimeout(() => {next();}, 100); // 设置动画持续时间
});// 全局后置守卫
router.afterEach(() => {setTimeout(() => {doorOverlay.$el.classList.add('hide');setTimeout(() => {doorOverlay.hide();doorOverlay.$el.classList.remove('hide');}, 500); // 设置动画持续时间}, 100); // 设置动画持续时间
});export default router;
三、在App.vue文件中使用蒙层组件
<template><div id="app"><Header></Header><!-- 路由挂载 --><router-view></router-view><Footer></Footer></div>
</template><script>
import Header from '@/components/Header/Header'
import Footer from '@/components/Footer/Footer'
import DoorOverlay from './components/DoorOverlay'export default {name: 'App',components: {Header,Footer,DoorOverlay}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}
a{text-decoration: none;color: #000000;
}
li{list-style: none;
}
*{margin: 0;padding: 0;
}
@media screen and (max-width:768px) {/* #app {padding-top:200px;} */
}
</style>
四、效果展示
