manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/App.vue

<template>
	<div id="app">
        <v-tour name="myTour" :steps="steps" :options="myOptions" :callbacks="myCallbacks" v-if="tourFlg"></v-tour>
		<transition name="fade" mode="out-in">
			<!-- <keep-alive>
                <router-view v-if='$route.meta != null && $route.meta.keepAlive'/>
            </keep-alive> -->
            <router-view v-if="isRouterAlive"/>
		</transition>

        <themeCom :color="color" @color-update="colorChange" v-show="false" />
	</div>
</template>

<script>
    import themeCom from "@/components/themeCom";
    export default {
        name: 'app',
        components: {
            themeCom
        },
        //父组件中返回要传给下级的数据
	  	provide() {
	    	return {
	     		reloads: this.reloads,
    		}
	  	},
		data(){
			return{
				isRouterAlive:true,
                firstTourFalse: false,
                color: '#409EFF'
			}
		},
        created() {
            const themes = localStorage.getItem('themes') || 'default'
            this.switchThemes(themes)
        },
        mounted() {
            this.firstTourFalse = localStorage.getItem('firstTourFalse') | true
            // 监听页面刷新事件
			window.addEventListener('unload', this.setItemFirstTourFalse)
        },
		methods:{
            switchThemes(type) {
                const colorType = { 
                    'default': '#409EFF',
                    'dark': '#FF0000',
                }
                setTimeout(() => {
                    this.colorChange(colorType[type])
                }, 0)
                window.document.documentElement.setAttribute( "data-theme", type );
            },
            colorChange(color) {
                this.color = color;
            },
            setItemFirstTourFalse() {
                localStorage.setItem('firstTourFalse', firstTourFalse)
            },
			reloads(){
				this.isRouterAlive = false
				this.$nextTick(() => {
					this.isRouterAlive = true
				})
			}
		}
    }
</script>
<style>
    .v-tour__target--highlighted {
        box-shadow: 0 0 0 99999px rgba(0,0,0,.4) !important;
    }
</style>

<style lang="scss">
    body {
        margin: 0px;
        padding: 0px;
        font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
        font-size: 14px;
        -webkit-font-smoothing: antialiased;
    }

    #app {
        position: absolute;
        top: 0px;
        bottom: 0px;
        width: 100%;
    }

    .el-submenu [class^=fa] {
        vertical-align: baseline;
        margin-right: 10px;
    }

    .el-menu-item [class^=fa] {
        vertical-align: baseline;
        margin-right: 10px;
    }

    .toolbar {
        background: #f2f2f2;
        padding: 10px;
        .el-form-item {
            margin-bottom: 10px;
        }
    }

    .fade-enter-active,
    .fade-leave-active {
        transition: all .2s ease;
    }

    .fade-enter,
    .fade-leave-active {
        opacity: 0;
    }

    .resetElEmtClass {
        .el-dialog__body {
            padding: 0 !important;
        }
    }
</style>