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

效果如下：源码（复制另存txt，修改.html直接运行）<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜单选中 - 自动滚动居中 - Vue Element Menu</title><link rel="stylesh

刘白超

3074人浏览 · 2021-07-23 14:57:06

刘白超 · 2021-07-23 14:57:06 发布

效果如下：

在这里插入图片描述

源码（复制另存txt，修改.html直接运行）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>菜单选中 - 自动滚动居中 - Vue Element Menu</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</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="item.url" :ref='item.url.replace("/","")'>
          {{item.name}}
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</body>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></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>

番外篇：

台风烟花来临前，天空格外美丽。中午出去吃饭，晴空万里，艳阳高照，竟然下起了大雨，活久见啊！
犹记六年级暑假的傍晚，十几年了，恍如隔日。
苍穹何人初见云？流云何年初照人？人生代代无穷已，流云年年望相似。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^