vue原生js编写网页引导功能

原生js编写网页引导功能，通过Cookiec来判断是否首次登陆：

<template>
    <div v-show="boxshow" class="backBox">
        <div v-show="firstshow" class="first">
            <div class="first_hole"></div>
            <div class="first_img"></div>
            <div class="frist_click">
                <div class="first_skip" @click="first_skipclick"></div>
                <div class="first_next" @click="first_nextclick"></div>
                <div class="first_step"></div>
            </div>
        </div>
        <div v-show="secondshow" class="second">
            <div class="second_hole"></div>
            <div class="second_img"></div>
            <div class="second_click">
                <div class="second_last" @click="second_lastclick"></div>
                <div class="second_next" @click="second_nextclick"></div>
                <div class="second_step"></div>
            </div>
        </div>
        <div v-show="thirdshow" class="third">
            <div class="third_hole"></div>
            <div class="third_img"></div>
            <div class="third_click">
                <div class="third_last" @click="third_lastclick"></div>
                <div class="third_next" @click="third_nextclick"></div>
                <div class="third_step"></div>
            </div>
        </div>
        <div v-show="fourthshow" class="fourth">
            <div class="fourth_hole"></div>
            <div class="fourth_img"></div>
            <div class="fourth_click">
                <div class="fourth_last" @click="fourth_lastclick"></div>
                <div class="fourth_next" @click="fourth_nextclick"></div>
                <div class="fourth_step"></div>
            </div>
        </div>
        <div v-show="fifthshow" class="fifth">
            <div class="fifth_hole"></div>
            <div class="fifth_img"></div>
            <div class="fifth_click">
                <div class="fifth_last" @click="fifth_lastclick"></div>
                <div class="fifth_next" @click="fifth_nextclick"></div>
                <div class="fifth_step"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            boxshow: true,
            firstshow: true,
            secondshow: false,
            thirdshow: false,
            fourthshow: false,
            fifthshow: false
        }
    },
    mounted() {
        this.checkCookies()
    },
    methods: {
        first_skipclick() {
            this.boxshow = false
            this.setCookies()
        },
        first_nextclick() {
            this.firstshow = false
            this.secondshow = true
        },
        second_lastclick() {
            this.firstshow = true
            this.secondshow = false
        },
        second_nextclick() {
            this.secondshow = false
            this.thirdshow = true
        },
        third_lastclick() {
            this.secondshow = true
            this.thirdshow = false
        },
        third_nextclick() {
            this.thirdshow = false
            this.fourthshow = true
        },
        fourth_lastclick() {
            this.thirdshow = true
            this.fourthshow = false
        },
        fourth_nextclick() {
            this.fourthshow = false
            this.fifthshow = true
        },
        fifth_lastclick() {
            this.fourthshow = true
            this.fifthshow = false
        },
        fifth_nextclick() {
            this.fifthshow = false
            this.boxshow = false
            this.setCookies()
        },
        checkCookies() {
            if (document.cookie.indexOf('showTips=false') === -1) {
                this.boxshow = true
            } else {
                this.boxshow = false
            }
        },
        setCookies() {
            // 设置Cookies的有效期为1年
            const deadline = new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 365)
            document.cookie = 'showTips=false; expires=' + deadline.toGMTString()
        }
    },
}

</script>

<style scoped>
.backBox {
    width: 100%;
    height: 100%;
    position: absolute;
    float: left;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}
.first{
    width: 820px;
    height: 350px;
    position: fixed;
    top: 15px;
    left: 12px;
    z-index: 100000;
}
.first_hole{
    width: 82px;
    height: 41px;
    border-radius:5px;
    background: url(../assets/guidance/first_hole.png) no-repeat center;
}
.first_img{
    width: 820px;
    height: 230px;
    position: relative;
    top: 10px;
    left: 33px;
    background: url(../assets/guidance/first.png) no-repeat;
}
.frist_click{
    width: 820px;
    height: 120px;
}
.first_skip{
    width: 170px;
    height: 39px;
    position: relative;
    float: left;
    top: 60px;
    left: 181px;
    background: url(../assets/guidance/skip.png) no-repeat;
    cursor:pointer;
}
.first_next{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 54px;
    left: 233px;
    background: url(../assets/guidance/next.png) no-repeat;
    cursor:pointer;
}
.first_step{
    width: 69px;
    height: 27px;
    position: relative;
    float: left;
    top: 65px;
    left: 242px;
    background: url(../assets/guidance/step1.png) no-repeat;
}

.second{
    width: 820px;
    height: 350px;
    position: fixed;
    top: 11px;
    left: 100px;
    z-index: 100000;
}
.second_hole{
    width: 266px;
    height: 46px;
    border-radius:5px;
    background: url(../assets/guidance/second_hole.png) no-repeat center;
}
.second_img{
    width: 820px;
    height: 280px;
    position: relative;
    top: 10px;
    left: 115px;
    background: url(../assets/guidance/second.png) no-repeat;
}
.second_click{
    width: 820px;
    height: 120px;
}
.second_last{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 45px;
    left: 195px;
    background: url(../assets/guidance/last.png) no-repeat;
    cursor:pointer;
}
.second_next{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 45px;
    left: 265px;
    background: url(../assets/guidance/next.png) no-repeat;
    cursor:pointer;
}
.second_step{
    width: 69px;
    height: 27px;
    position: relative;
    float: left;
    top: 55px;
    left: 275px;
    background: url(../assets/guidance/step2.png) no-repeat;
}

.third{
    width: 820px;
    height: 550px;
    position: fixed;
    top: 13px;
    right: 213px;
    z-index: 100000;
}
.third_hole{
    width: 96px;
    height: 38px;
    border-radius:5px;
    position: relative;
    float: right;
    right: 275px;
    background: url(../assets/guidance/third_hole.png) no-repeat center;
}
.third_img{
    width: 820px;
    height: 280px;
    position: relative;
    top: 40px;
    left: 110px;
    background: url(../assets/guidance/third.png) no-repeat;
}
.third_click{
    width: 820px;
    height: 120px;
}
.third_last{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 60px;
    left: 107px;
    background: url(../assets/guidance/last.png) no-repeat;
    cursor:pointer;
}
.third_next{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 60px;
    left: 165px;
    background: url(../assets/guidance/next.png) no-repeat;
    cursor:pointer;
}
.third_step{
    width: 69px;
    height: 27px;
    position: relative;
    float: left;
    top: 71px;
    left: 175px;
    background: url(../assets/guidance/step3.png) no-repeat;
}

.fourth{
    width: 820px;
    height: 450px;
    position: fixed;
    right: 0px;
    z-index: 100000;
}
.fourth_hole{
    width: 34px;
    height: 35px;
    border-radius:5px;
    position: relative;
    float: right;
    top: 14px;
    right: 148px;
    background: url(../assets/guidance/fourth_hole.png) no-repeat center;
}
.fourth_img{
    width: 820px;
    height: 280px;
    position: relative;
    float: right;
    top: 20px;
    left: 300px;
    background: url(../assets/guidance/fourth.png) no-repeat;
}
.fourth_click{
    width: 820px;
    height: 120px;
}
.fourth_last{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 30px;
    left: 296px;
    background: url(../assets/guidance/last.png) no-repeat;
    cursor:pointer;
}
.fourth_next{
    width: 110px;
    height: 50px;
    position: relative;
    float: left;
    top: 30px;
    left: 360px;
    background: url(../assets/guidance/next.png) no-repeat;
    cursor:pointer;
}
.fourth_step{
    width: 69px;
    height: 27px;
    position: relative;
    float: left;
    top: 40px;
    left: 370px;
    background: url(../assets/guidance/step4.png) no-repeat;
}

.fifth{
    width: 820px;
    height: 450px;
    position: fixed;
    bottom: 5px;
    right: 5px;
    z-index: 100000;
}
.fifth_hole{
    width: 85px;
    height: 85px;
    border-radius:5px;
    position: fixed;
    bottom: 37px;
    right: 11px;
    background: url(../assets/guidance/fifth_hole.png) no-repeat center;
}
.fifth_img{
    width: 740px;
    height: 350px;
    position: fixed;
    float: right;
    bottom: 84px;
    right: 10px;
    background: url(../assets/guidance/fifth.png) no-repeat;
}
.fifth_click{
    width: 740px;
    height: 120px;
    position: fixed;
    float: right;
    bottom: 70px;
    right: 10px;
}
.fifth_last{
    width: 110px;
    height: 50px;
    position: relative;
    bottom: 10px;
    left: 1px;
    background: url(../assets/guidance/last.png) no-repeat;
    cursor:pointer;
}
.fifth_next{
    width: 200px;
    height: 50px;
    position: relative;
    bottom: 54px;
    left: 160px;
    background: url(../assets/guidance/finish.png) no-repeat;
    cursor:pointer;
}
.fifth_step{
    width: 69px;
    height: 27px;
    position: relative;
    bottom: 99px;
    left: 346px;
    background: url(../assets/guidance/step5.png) no-repeat;
}
</style>