Vue 跑马灯横向滚动（单文本）

最新推荐文章于 2024-08-22 02:07:07 发布

阳光的男夹克

最新推荐文章于 2024-08-22 02:07:07 发布

阅读量306

点赞数 2

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_44640323/article/details/136321381

版权

完整代码如下

<template>
  <div
    class="notice-bar"
    @click="tipClick"
    @mouseenter="pauseAnimation"
    @mouseleave="resumeAnimation"
  >
    <div class="notice-bar__icon">
      温馨提示：
    </div>
    <div class="notice-bar__wrap">
      <div class="notice-bar__content" :style="{ animationDuration: animationDuration, animationPlayState: animationPlayState }">
        {{ text }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NoticeBar',
  props: {
    text: {
      type: String,
      default: ''
    },
    animationDuration: {
      type: String,
      default: '10s'
    }
  },
  data() {
    return {
      animationPlayState: 'running' // 初始状态为运行
    }
  },
  methods: {
    tipClick() {
      this.$emit('click')
    },
    pauseAnimation() {
      this.animationPlayState = 'paused' // 鼠标移入时暂停动画
    },
    resumeAnimation() {
      this.animationPlayState = 'running' // 鼠标移出时恢复动画
    }
  }
}
</script>

<style scoped>
.notice-bar {
  cursor: pointer;
  position: relative;
  width: 100%;
  padding: 0;
  font-weight: 400;
  display: flex;
  height: 100%;
  align-items: center;
}

.notice-bar__icon {
  color: #fff;
  font-size: 13px;
  width: 70px;
}

.notice-bar__wrap {
  color: #fff;
  font-size: 13px;
  position: relative;
  display: flex;
  flex: 1;
  align-items: center;
  overflow: hidden;
}

.notice-bar__content {
  white-space: nowrap;
  animation: marquee linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>