导航栏选中 - 自动滚动居中 - Vue Element Menu

时间:2025-03-18 08:08:48
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜单选中 - 自动滚动居中 - Vue Element Menu</title> <!-- 引入样式 --> <link rel="stylesheet" href="/element-ui/lib/theme-chalk/"> </head> <body style="background: #eee;"> <div id="app"> <el-menu ref='menu' mode="horizontal" style="width: 500px;margin:0 auto;overflow-x: auto;display: flex;" @select="handleSelect" > <template v-for="(item, i) in menu"> <el-menu-item :index="" :ref='("/","")'> {{}} </el-menu-item> </template> </el-menu> </div> </body> <script src="/vue/dist/"></script> <!-- 引入组件库 --> <script src="/element-ui/lib/"></script> <script> let goAnimate = '' new Vue({ el: '#app', data() { return { menu: [ {url:'/libai',name:'十步一杀'}, {url:'/ludan',name:'送命中'}, {url:'/lixin',name:'千圣万骑'}, {url:'/kai',name:'闪现A'}, {url:'/jialuo',name:'暴击中'}, {url:'/zhuge',name:'元气弹'}, {url:'/sunbin',name:'冲啊'}, {url:'/niutou',name:'勇敢牛牛'}, {url:'/yuji',name:'霸王'}, {url:'/chengyaojin',name:'大干一场'}, {url:'/lvbu',name:'白色暴击'}, {url:'/sunwukong',name:'一棒一个'}, {url:'/yunzhongjun',name:'鸟人'}, ] } }, mounted(){ this.activeMenu('/niutou') this.$refs.menu.activeIndex = '/niutou' }, methods: { handleSelect(key, keyPath) { this.activeMenu(key) }, activeMenu(path) { // 滚动剧中 start //菜单父元素实例 const menu = this.$refs.menu.$el //菜单选中元素实例 const currentMenu = this.$refs[path.replace("/","")][0].$el //父元素滚动条距离 = 选中元素左侧距离 + 选中元素一半宽度 - 父元素一半宽度 const goLeft = currentMenu.offsetLeft + currentMenu.offsetWidth/2 - menu.offsetWidth/2 // 每次移动值 const step = 10 if(goAnimate){ window.clearInterval(goAnimate) goAnimate = '' } // 本打算写贝塞尔曲线,我实在不会呀,太复杂了 goAnimate = setInterval(() => { if(menu.scrollLeft > goLeft){ // 滚动条实际值 大于 滚动条目标值 ,就是点了左边的菜单,自动减step,滚动条向左滚动,内容向右滚动 menu.scrollLeft -= step }else{ // 滚动条实际值 小于 滚动条目标值 ,就是点了右边的菜单,自动加step,滚动条向右滚动,内容向左滚动 menu.scrollLeft += step } // 滚动条实际值 与 滚动条目标值 绝对误差,小于每次移动值 || 最左侧边界值 || 最右侧边界值 if(Math.abs(menu.scrollLeft - goLeft) < step || menu.scrollLeft == 0 || Math.ceil(menu.scrollLeft) + menu.offsetWidth == menu.scrollWidth){ window.clearInterval(goAnimate) goAnimate = '' } }, 10); // 滚动剧中 end }, } }) </script> </html>