Vue.js 文字滚动组件封装与应用

<template>
  <div class="text-scroller">
    <div class="text" v-html="text"></div>
  </div>
</template>

<script>
export default {
  props: ['text'],
  data() {
    return {
      position: 0
    }
  },
  methods: {
    scroll() {
      this.position -= this.scrollSpeed;
      if (this.position < -this.textWidth) {
        this.position = 0;
      }
    },
    updateTextWidth() {
      this.textWidth = this.$el.querySelector('.text').getBoundingClientRect().width;
    }
  },
  created() {
    this.scrollSpeed = 2;
    this.updateTextWidth();
    setInterval(this.scroll, 50);
  }
}
</script>

<style>
.text-scroller {
  overflow: hidden;
  width: 100%;
}

.text {
  position: absolute;
  white-space: nowrap;
}
</style>

import TextScroller from './TextScroller.vue';

Vue.component('text-scroller', TextScroller);

<template>
  <text-scroller :text="text"></text-scroller>
</template>

<script>
export default {
  data() {
    return {
      text: '滚动文字内容'
    }
  }
}
</script>