实现marqueen废弃标签的功能

实现marqueen废弃标签的功能

marqueen 标签还是很好用的，在一些显示在大屏幕上，无法换行和无法拖动的客户端，滚动展示还是很有必要的。

网上也有很多模拟的效果，但是没办法判断当前的文本是否已经超出。
所以我模拟了一个效果。
功能：

1. 可以滚动
2. 当没有超出时不滚动
3. 控制滚动速度

talk is cheap,show me your code

follow is code :

<!--使用方法-->
<!--<marqueen-vue :scrollSpeed="8">阿斯顿发生的发发发的</marqueen-vue>-->
<template>
  <div class="mq-container" ref="container">
    <p class="mq-text" ref="text" :style="isScroll?scrollStyle:{}"><slot></slot></p>
  </div>
</template>

<script>
export default {
  name: 'marqueen-vue',
  data(){
    return {
      isScroll: false,
      scrollStyle: {
        paddingLeft: '30%',
      }
    }
  },
  props:{
    scrollSpeed: {
      type: Number,
      default: 8
    }
  },
  created(){
    this.scrollStyle = {
      ...this.scrollStyle,
      animation: `marquee ${this.scrollSpeed||8}s linear infinite`,
    }
  },
  mounted(){
    const $container = this.$refs.container;
    const $text = this.$refs.text;
    if($container.clientWidth<$text.clientWidth) {
      this.isScroll = true;
    }

  }
}
</script>

<style>
.mq-container{
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  text-overflow: initial;
}
.mq-text {
  display: inline-block;
  margin: 0;

}
.mq-text.scroll{
  animation: marquee 8s linear infinite;
  padding-left: 30%;
}
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}
</style>