菜单标题过长，vue.js实现由右至左轮播滚动，效果棒棒！

大千世界，茫茫人海，相识就是一种缘分。若此篇文章对您有帮助，点个赞或点个关注呗！

前言

前期项目开发中有这样一个需求，目录标题太长，超出了预设的标题宽度width；但是又想让用户能够预览标题的所有信息，最终决定采用轮播的效果实现标题由右至左定时滚动。

✍一、话不多说，先预览效果图

✍二、实现过程

1. 鼠标经过标题进入 @mouseenter事件，通过dom节点获取，获取标题的信息的宽度与标题预设的固定宽度；
2. 若标题宽度超出预设宽度，则让它实现由右至左的滚动效果,则调用setInterval()方法可按照指定的周期（以毫秒计）来调用函数；
3. 鼠标离开标题进入 @mouseleave事件 ，则标题恢复至初始状态，超出的标题信息则隐藏处理；

✍三、具体代码实现
   DirectoryTitle.vue

          <div
            v-for="(menu,index) in menuList"
            :key="index"
          >
            <div
              class="menu-item"
              @mouseenter="startScroll(menu.menuName)"
              @mouseleave="stopScroll(menu.menuName)"
            >
              <div class="menu-textbox">
                <div :id="menu.menuName" class="menuTxt">{{menu.menuName}}</div>
              </div>
            </div>
          </div>

   DirectoryTitle.js

export default {
  data() {
    return {
      timer: null //菜单定时器
    };
  }
  methods: {
  
  //鼠标经过事件
    startScroll(dom) {
    //通过ID获取dom节点信息
      dom = document.getElementById(dom);
      //从而通过dom节点信息获取style样式信息,不同浏览获取方式不一样，底下有公共方法判断处理
      let maxLength = parseInt(this.getStyle(dom, "width").replace(/[px]/g, ""));
      //获取预设标题的宽度，用于标题文本信息的比较，之所以取索引[0]，是因为标题都是动态循环显示，
      //那么所有标题的预设宽度都是一致的，故取其中之一就可以。
      let preDomLength= parseInt(
        this.getStyle(
          document.getElementsByClassName("menu-textbox")[0],"width").replace(/[px]/g, ""));
      //判断如果标题信息的宽度小于等于标题的预设宽度，则直接return不执行以下方法
      if (maxLength <= preDomLength) return;
      //标题的偏移量
      let marginLeft = 0;
      if (this.timer !== null) {
        clearInterval(this.timer);
      } else {
      //按照预设的40毫秒，周期的执行marginLeft向左偏移，实现由右至左的轮播效果
        this.timer = setInterval(() => {
//此处if语句的判断目的是：标题向左偏移的像素就是超出预设宽度的像素，
//所有此处当判断条件相等时不在执行向左偏移.加的10像素是为了增加最后一个字距离预设宽度末尾的距离
//500毫秒为每次偏移结束的间隔时间，自定义；45毫秒为标题滚动的速度，自定义
          if (marginLeft <= -(maxLength - preDomLength+ 10)) {
            setTimeout(() => {
              marginLeft = 0;
              marginLeft --;
            }, 500);
          } else {
            marginLeft --;
          }
          //通过dom节点添加css样式
          dom.style.marginLeft = marginLeft + "px";
        }, 45);
      }
    },
  //鼠标离开事件，停止偏移
    stopScroll(dom) {
      clearInterval(this.timer);
      this.timer = null;
      dom = document.getElementById(dom);
      //通过dom节点添加css样式
      dom.style.marginLeft = "0px";
    },
  //获取dom节点信息的公共方法
    getStyle(obj, attr) {
      if (obj.currentStyle) {
        //IE
        return obj.currentStyle[attr];
      } else {
        //Chrom  firefox
        return window.getComputedStyle(obj, false)[attr];
      }
    }
</script>

至此，标题的滚动效果得以完美实现！