文本跑马灯

1、背景

当一行文字超过容器宽度的时候的时候，希望文字能滚动展示

2、代码实现

先异步获取文本内容，判断文本的宽度是否超过容器的宽度，没有超过不展示滚动动画，超过宽度，加载滚动的动画。

<div class="flex-1">
    <div ref="scrollText" :class="{ text: marqueeFlag }">{{ mineRightsMarquee }}</div>
</div>

 .flex-1 {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      font-size: 13px;
      color: #fed8b4;
      padding: 0 8px;
      .text {
        display: inline-block;
        animation: scrollText 10s linear infinite;
      }
}

//从有往左滚动动画，每次都从右边中间开始
@keyframes scrollText {
  from {
    transform: translateX(50%);
  }
  to {
    transform: translateX(-100%);
  }
}

data(){
    return{
        marqueeFlag: false,
        mineRightsMarquee: '', //跑马灯文案
    }
},
mounted(){
    this.init()
},
methods:{
    async init(){
          await getMineRightsMarquee()//异步获取跑马灯文案信息
          const containerWidth = this.$refs.scrollText.parentElement.clientWidth; //获取容器宽度
          const textWidth = this.$refs.scrollText.scrollWidth; // 获取文本宽度
          console.log(containerWidth, textWidth);
          if (textWidth > containerWidth) {
            this.marqueeFlag = true;
          } else {
            this.marqueeFlag = false;
          }
    } ,
    getMineRightsMarquee(){
        ...
    }
}