vue + element 新手指引

直接上代码

template-(Guide.vue)

<template>
    <div>
        <!-- 新手指引 -->
        <div id="mask"></div>
        <div id="searchTip">
            <div class="stepA">
                <el-button type="primary" size="small" class="close" @click="close">我知道了</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'RpGuide',
        methods: {
            close() {
                this.$cookie.set('guide', 1 ,{domain:'hanmaker.com'})
                this.$destroy(true);
                this.$el.parentNode.removeChild(this.$el);
            },
        },
    }
</script>

<style scoped>
/* 新手指引 */
#mask{ 
    height:100%; 
    width:100%; 
    background:#000; 
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity:.5; 
    filter:alpha(opacity=50);
    position:absolute; 
    left:0; 
    top:0; 
    display:block;
    z-index: 99999;
}
#searchTip{ 
    width:100%; 
    height:100%; 
    position: absolute; 
    left:50%; 
    top: 0;
    margin-left: -50%; 
    display:block;
    z-index: 99999;
}
#searchTip div{ 
    position:absolute; 
    display:block; 
}
#searchTip div button{ 
    position:absolute;
    overflow:hidden;
}
.stepA{ 
    background-image:url(//pic2.hanmaker.com/common/images/guide.png);
    background-repeat: no-repeat;
    height:625px; 
    width:946px; 
    top:0px; 
    left:32px; 
    display:block;
}
.stepA button{
    top: 580px;
    left: 850px;
}
</style>

命令行输入：npm install vue-cookie
man.js

import VueCookie from 'vue-cookie';
Vue.use(VueCookie);

根目录文件，我这里是app.vue（home.vue）

import Vue from 'vue';
import Guide from '@/components/Guide/Guide'

mounted(){
    let guide = this.$cookie.get('guide');
    if(guide != 1){
        let MessageConstructor = Vue.extend(Guide);
        let instance = new MessageConstructor();
        instance.$mount();
        document.body.appendChild(instance.$el);
    }
},