最近有个需求，用户首次登陆展示新手指导1，点击知道了1关闭指导1，显示指导2，点击知道了2关闭指导2。
遮罩
view代码
<div class="topMask" v-if="firstLoginShow"></div>
css代码
.topMask{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index:999;
}
el-popover
view代码
<el-popover
placement="bottom"
width="226"
trigger="click" //触发方式
popper-class="firstPopover" //添加类名
v-if="firstLoginShow"
>
<span class="spanContainer" slot="reference" ref="firstPopover">XXX文本</span>
<div class="firstCover">XXX文本</div>
<span class="firstCover">XXX提示信息</span>
<div classs="KnowOne" @click="showNext">知道了</div>
</el-popover>
//提示2的代码和1基本相同
Model代码
data(){
return{
firstLoginShow:true,//首次登陆
}
},
mounted(){
this.$refs.firstPopover.click();//挂载后弹出提示1
},
methods:{
showNext(){
this.$refs.firstPopover.click();//关闭提示1
this.$refs.secondPopover.click();//打开提示2
}
}
剩下是对popover文本样式的修改，这里不做过多描述。项目有用scss，我在全局修改的样式
