321倒计时

最新推荐文章于 2023-04-14 14:39:03 发布

匍匐前进的小白

最新推荐文章于 2023-04-14 14:39:03 发布

阅读量273

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_57605398/article/details/128950580

版权

这是一个使用Vue.js编写的组件，名为ThreeSecondsPopup，功能是显示一个从3倒计时到0的弹窗。组件利用数据绑定和定时器实现倒计时效果，同时应用了CSS动画来增强用户体验。当倒计时结束时，会触发一个自定义事件threeSecondsShow，以便在父组件中处理后续操作。

摘要由CSDN通过智能技术生成

<template>
  <view class="popup" >
    <view class="popup_wrapper">
      <view
        class="count"
        v-show="count"
        :class="
          count && count % 2 === 0 ? 'count-animation-0' : 'count-animation-1'
        "
      >
        {{ count }}
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ThreeSecondsPopup',
  data() {
    return {
      count: '', // 倒计时时间
      timer: null,
    }
  },
  created() {
    this.countDown()
  },
  methods: {
    countDown() {
      const TIME_COUNT = 3
      if (!this.timer) {
        this.count = TIME_COUNT
        this.timer = setInterval(() => {
          if (this.count > 1 && this.count <= TIME_COUNT) {
            // 限制倒计时区间
            this.count--
          } else {
            clearInterval(this.timer) // 删除定时器
            // 三秒后关闭（三秒后需要进行的操作）
            this.$emit('threeSecondsShow', this.ThreeSecondsShow)
          }
        }, 1000)
      }
    },
  },
}
</script>

<style scoped lang="scss">
@import '~@/styles/mixin.scss';
.popup {
  position: fixed;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: $uni-bg-color-mask;
  z-index: 1001;
  .popup_wrapper {
    width: 100%;
    height: 100%;
    @include flex-layout($dir: column, $justify: center, $align: center);
    .count {
      opacity: 0;
      transform: scale(3);
      font-size: 180rpx;
      color: #fff;
      text-shadow: 0rpx 0rpx 20rpx #e2e5e9;
    }

    .count-animation-0 {
      animation: move-0 1s ease-in-out 1;
    }
    .count-animation-1 {
      animation: move-1 1s ease-in-out 1;
    }

    @keyframes move-0 {
      0% {
        opacity: 1;
        transform: scale(3);
      }
      97% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }
   // css3动画
    @keyframes move-1 {
      0% {
        opacity: 1;
        transform: scale(3);
      }
      97% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(1);
      }
    }
  }
}
</style>