Vue文字滚动插件marquee-components优化

import marquee from 'marquee-components'
Vue.use(marquee );

<template>
  <div id="app">
       <marquee :val="msg"></marquee>
  </div>
</template>
<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'vuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevuevue'
    }
  }
}
</script>

<template>
  <div class="marquee-wrap">
    <div class="scroll">
      <p class="marquee">{{text}}</p>
      <p class="copy"></p>
    </div>
    <p class="getWidth">{{text}}</p>
  </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: ''
    }
  },
  created () {
    let timer = setTimeout(() => {
      this.move()
      clearTimeout(timer)
    }, 1000)
  },
  mounted () {
    for (let item of this.val) {
      this.text += ' ' + item
    }
  },
  methods: {
    move () {
      let maxWidth = document.querySelector('.marquee-wrap').clientWidth
      let width = document.querySelector('.getWidth').scrollWidth
      if (width <= maxWidth) return
      let scroll = document.querySelector('.scroll')
      let copy = document.querySelector('.copy')
      copy.innerText = this.text
      let distance = 0 
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 16
        }
        scroll.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
  .marquee-wrap {
    width: 100%;
    overflow: hidden;
    position: relative;
  }
  .marquee{
    margin-right: 16px;
  }
  p {
    word-break:keep-all;
    white-space: nowrap;
    font-size: 16px;
    font-family: "微软雅黑 Light";
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>

<template>
  <div class="container">
        <marquee :val="title"></marquee>
  </div>
</template>
<script>
import marquee from './marquee'
 name: 'index',
 components: {
    marquee
 },
  data () {
    return {
		title: ''
    }
  },
</script>

<template>
  <div>
     <div class="marquee-wrap" ref="marqueeWrap">
       <div class="scroll" ref="scroll">
         <p class="marquee" ref="marquee">{{text}}</p>
         <p class="copy" ref="copy" v-if="showCopy">{{text}}</p>
       </div>
       <p class="getWidth" ref="getWidth">{{text}}</p>
     </div>
 
  </div>
</template>
<script>
import { clearTimeout } from 'highcharts';
export default {
  name:"marquee",
  props:['val'],

  data() {
    return {
      timer:null,
      creatTimer:null,
      watchTimer:null,
      text:'',
      showCopy:true
    };
  },
  created(){
    this.creatTimer = setTimeout(() => {
      this.move()
      clearTimeout(this.creatTimer)
    }, 1000);
  },
  mounted(){
    console.log("hi")
    console.log(this.val)
    for(let item of this.val){
      this.text+=' '+item
    }
    console.log(this.text)
  },
  methods: {
    move(){
       this.$nextTick(()=>{
          console.log("move")
          let maxWidth = this.$refs.marqueeWrap.clientWidth
          let width = this.$refs.getWidth.scrollWidth
          let scroll = this.$refs.scroll
          if(width<maxWidth){
            this.showCopy = false
            scroll.style.transform = 'translateX(0px)'
            clearInterval(this.timer)
            return
          }else{
            this.showCopy = true
          }
          // let copy = this.$refs.copy
          console.log(this.text)
          // copy.innerText = this.text
          
          let distance = 0
          clearInterval(this.timer)
          this.timer = setInterval(() => {
            distance-=1
            if(-distance >= width){
              distance = 16
            }
            scroll.style.transform = 'translateX(' + distance+'px)'
          }, 20);
          })
    }  
  },
  watch:{
    val(newValue){
      clearTimeout(this.watchTimer)
      this.watchTimer = setTimeout(() => {
       let text=""
       this.text = ""
       for(let item of newValue){
          text+=' '+item
       }
       this.text = text
       console.log(this.text)
      //  clearInterval(this.timer)
       this.move()
       }, 2000);            
    }
  },
  beforeDestroy(){
    clearInterval(this.timer)
    clearInterval(this.creatTimer)
  }
};
</script>
 
<style scoped>
.marquee-wrap{
  width:100%;
  overflow:hidden;
  position: relative;
}
.marquee{
  margin-right:16px;

}
p{
  word-break:keep-all;
  white-space: nowrap;
}
.scroll{display: flex;}
.getWidth{
  word-break:keep-all;
  white-space: nowrap;
  position: absolute;
  opacity: 0;
  top:0
}
</style>