vue小组件-文字横向滚动

简单思路：

文字用弹性盒子包裹展示，利用transform translateX负值来进行移动

marquee.vue 代码：

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

<script>
export default {
  name: 'marquee',
  props: ['val'],
  data () {
    return {
      timer: null,
      text: '',
      copy:''
    }
  },
  created () {
    // let timer = setTimeout(() => {
    //   this.move()
    //   clearTimeout(timer)
    // }, 3000)
  },
  mounted () {
      this.text=this.val
  },
  updated(){
      this.text=this.val
      let timer = setTimeout(() => {
        this.move()
        clearTimeout(timer)
    }, 3000)
  },
  methods: {
    move () {
      // let maxWidth = document.querySelector('.marquee-wrap').clientWidth
      // let width = document.querySelector('.getWidth').scrollWidth
      let boxwidth=this.$refs.marqueebox.clientWidth
      let width=this.$refs.getWidth.clientWidth
      if (width <= boxwidth) return
      // let scroll = document.querySelector('.scroll')
      let scroll=this.$refs.scroll
      let distance = 0 
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= width) {
          distance = 30
        }
        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;
  }
  .scroll {
    display: flex;
  }
  .getWidth {
    word-break:keep-all;
    white-space:nowrap;
    position: absolute;
    opacity: 0;
    top: 0;
  }
</style>

index 内引用：

<marquee  v-if="Text" :val="Text" ></marquee>

import marquee from "@/common/marquee.vue";

components: {
    marquee,
  },