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

77次阅读

共计 871 个字符，预计需要花费 3 分钟才能阅读完成。

最近有个用 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…

正文完