vue中，实现 “文字” 超过设置的宽度后自动【走马灯向左滚动】，的（marquee）组件封装

创建组件文件marquee.vue

<template>
    <div class="scrollText" ref="outer">
        <div class="st-inner" :class="{'st-scrolling': needToScroll}">
            <span class="st-section" ref="inner">{
  
  {text}}</span>
            <span class="st-section" v-if="needToScroll">{
  
  {text}}</span>
            <!-- 加两条是为了滚动的时候实现无缝衔接 -->
        </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      needToScroll: false,
      text: ''
    }
  },
  mounted () {
    this.startCheck()
  },
  beforeDestroy () {
    this.stopCheck()
  },
  methods: {
    // 检查当前元素是否需要滚动
    check () {
      this.setText()
      this.$nextTick(() => {
        let flag = this.isOverflow()
        this.needToScroll = flag
      })
    },

    // 判断子元素宽