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

本文展示了如何在Vue.js中创建一个滚动走马灯组件,利用模板、数据绑定和方法处理文本溢出,实现无缝滚动效果。组件通过监听元素尺寸变化,动态判断是否需要启动滚动,并使用CSS动画实现平滑滚动效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建组件文件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
      })
    },

    // 判断子元素宽度是否大于父元素宽度,超出则需要滚动,否则不滚动
    isOverflow () {
      let outer = this.$refs.outer
      let inner = this.$refs.inner
      let outerWidth = this.getWidth(outer)
      let innerWidth = this.getWidth(inner)
      return innerWidth > outerWidth
    },

    // 获取元素宽度
    getWidth (el) {
      let { width } = el.getBoundingClientRect()
      return width
    },

    // 获取到父组件传过来的内容复传给this.text
    setText () {
      this.text =
        (this.$slots.default &&
          this.$slots.default.reduce((res, it) => res + it.text, '')) ||
        ''
    },

    // 增加定时器,隔100ms执行一次,使其更流畅
    startCheck () {
      this._checkTimer = setInterval(this.check, 100)
      this.check()
    },

    // 关闭定时器
    stopCheck () {
      clearInterval(this._checkTimer)
    }
  }
}
</script>
<style lang="scss" scoped>
.scrollText {
  overflow: hidden;
  white-space: nowrap;
}
.st-inner {
  display: inline-block;
}
.st-scrolling .st-section {
  padding: 0 5px;
}

// 向左匀速滚动动画
.st-scrolling {
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
</style>

在页面中引用

<template>
  <div class="scroll_box">
    <marquee> 我是一条文字走马灯文字走马灯文字走马灯文字走马灯文字走马灯文字走马灯 </marquee>
  </div>
</template>

<script>
import marquee from '@/components/Marquee/marquee'
export default {
  components: {
    marquee
  },
  data () { 
    return {}
  }
}
</script>

<style scoped>
  .scroll_box{
     width:100px; 
  }
</style>

       希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值