直接上代码
template-(Guide.vue)
```javascript
<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
```javascript
import VueCookie from 'vue-cookie';
Vue.use(VueCookie);
```
根目录文件，我这里是app.vue（home.vue）
```javascript
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);
}
},
```
