「组件」侧边hover锚点导航双向绑定

样式如图： 1：在components文件夹下新建SideAnchorNav.vue

1<template>
2    <div class="sideAnchorNav">
3        <div class="left-nav" :class="navText?'navHover':''" @mouseenter="navText=true" @mouseleave="navText=false"></div>
4        <ul class="nav-link" @mouseenter="navText=true" @mouseleave="navText=false">
5            <li class="nav" :class="index==activeMenu?'anchorNavSelect':''" v-for="(item,index) in allMenuList" :key='index'
6             @click="jump(index)"><a href="javascript:void(0)"><span :class="index==activeMenu||navText?'spanHover':''">{{item}}</span></a></li>
7        </ul>
8    </div>
9</template>
10
11<script>
12    export default {
13        data() {
14            return {
15                navText: false,
16                scroll: null,
17                activeMenu: null,
18            }
19        },
20        props: ['allMenuList'],//！！！注意
21        mounted() {
22            window.addEventListener('scroll', this.dataScroll);
23        },
24        watch: {
25            scroll: function() {
26                this.loadSroll()
27            }
28        },
29        methods: {
30            dataScroll: function() {
31                this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
32            },
33            jump(index) {
34                this.activeMenu = index
35                let jump = document.getElementsByClassName('section');//！！！注意
36                let total = jump[index].offsetTop;
37                document.body.scrollTop = total;
38                document.documentElement.scrollTop = total - 70;
39                window.pageYOffset = total;
40            },
41            loadSroll: function() {
42                var self = this;
43                var navs = document.getElementsByClassName('nav')
44                var sections = document.getElementsByClassName('section');//！！！注意
45                for (var i = 0; i < sections.length; i++) {
46                    if (self.scroll >= sections[i].offsetTop - 200) {
47                        this.activeMenu = i
48                    }
49                    if (self.scroll == 0) {
50                        this.activeMenu = null
51                    }
52                }
53
54            },
55        }
56    }
57</script>
58
59<style lang="scss">
60    .sideAnchorNav {
61        .left-nav {
62            height: 100%;
63            width: 500px;
64            position: fixed;
65            top: 0;
66            left: -250px;
67            z-index: 10;
68        }
69
70        .navHover {
71            background-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0.2));
72            filter: blur(40px);
73        }
74
75        .nav-link {
76            position: fixed;
77            left: 3%;
78            top: 35%;
79            z-index: 1;
80            color: white;
81            z-index: 20;
82        }
83
84        .nav {
85            a {
86                color: white;
87                font-size: 16px;
88            }
89
90            opacity: 0.6;
91            line-height: 1;
92
93            span {
94                opacity: 0;
95                transition: all 0.5s;
96            }
97
98            span:hover {
99                text-decoration: underline;
100
101            }
102
103            .spanHover {
104                line-height: 3;
105                opacity: 1;
106            }
107        }
108
109        .anchorNavSelect {
110            opacity: 1;
111            border: none;
112
113            a {
114                color: orange;
115            }
116        }
117    }
118</style>

2：在需要使用的页面中

1<SideAnchorNav :allMenuList="this.allMenuList"></SideAnchorNav>
2import SideAnchorNav from '@/components/SideAnchorNav .vue'
3components: { SideAnchorNav },
4allMenuList: ['SAP 产品', 'PA全球顾问认证', '教育培训资源', '教育培训解决方案'],//！！！自行更改
5在相对应的div上加class="section",