关于vue.js:日历组件展示内容超长滚动展示

最近有个用vue写的日历组件，日历内显示的内容有超长须要滚动显示的：

次要的思路就是：
1、监听内容变动
2、判断内容长度与父级宽度
3、给内容增加animation

html

<div class="calendar_status">  <div>{data.defvalue.text}</div>     <div class="calendar_status_text">{data.defvalue.value.status}   </div></div>

css

 /* 单元格异样文字款式 */  .calendar_status_text {    color: red;    overflow: hidden;    white-space: nowrap;  } /* 超长滚动显示 */  .calendar_status {    overflow: hidden;    /* 减少scroll类 */    & > .scroll {      text-overflow: unset;      overflow: visible;      animation: move 4s linear infinite;    }  }  @keyframes move {    0% { transform: translateX(100%); }    100% { transform: translateX(-100%); }  }

js

    checkScroll () {      this.$nextTick(() => {        // 获取选中元素        let selectedItems = [...document.querySelectorAll('.calendar_status')]        selectedItems.forEach(item => {          let child = item.querySelector('.calendar_status_text')          if (child.scrollWidth > item.offsetWidth) { // 判断child文字宽度            child.classList.add('scroll')          } else {            child.classList.remove('scroll')          }        })      })    },

参考文档：https://www.jianshu.com/p/2f8...