前端vue倒计时组件模块化开发

Posted 2022-06-07 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端vue倒计时组件模块化开发相关的知识，希望对你有一定的参考价值。

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。你对它笑，它就对你笑；你对它哭，它也对你哭。

🔋 小目标: 成为 会设计、会开发的 “万能钥匙”

📝文章内容

✍ 一、组件代码

<!--活动倒计时组件-->
<style lang="less" scoped>
.CountDown
  width: 280px;
  height: 20px;
  display: flex;
  border-top-left-radius: 10px;
  border: 1px solid red;


  .CountDown_p1
    width: 120px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    background-color:red;
    color: floralwhite;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    font-size: 16px;
    font-weight: bold;
  
  .CountDown_p2
    width: 190px;
    height: 20px;
    line-height: 20px;
    color: red;
    font-size: 14px;
    margin-left: 14px;
  

</style>
<template>
  <div class="CountDown">
    <p class="CountDown_p1">活动倒计时：</p>
    <p class="CountDown_p2">time</p>
  </div>
</template>
<script>
export default
  data () 
    return 
      time : '',
      flag : false
    
  ,
  mounted () 
    //setInterval 开启定时器
    let time = setInterval(() => 
      if (this.flag == true) 
        //clearInterval()方法能够取消setInterval()方法设置的定时器
        clearInterval(time);
      
      this.countDown();
    , 500);
  ,
  props : 
    endTime : 
      type: String
    
  ,
  methods : 
    //倒计时函数
    countDown () 
      //剩余时间
      const endTime = new Date(this.endTime);
      //系统时间
      const nowTime = new Date();

      let leftTime = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);

      let d = parseInt(leftTime / (24 * 60 * 60));//天数
      let h = this.formate(parseInt(leftTime / (60 * 60) % 24));//时间
      let m = this.formate(parseInt(leftTime / 60 % 60));//分钟
      let s = this.formate(parseInt(leftTime % 60));//秒

      if(leftTime <= 0)
        this.flag = true;
        this.$emit('time-end');
        this.time = '活动已结束';
      else
        // 需要修改时间样式的话 ，比如需要什么30分钟倒计时，就只保留分和秒
        this.time = `$d 天 $h 小时 $m 分 $s 秒`;
      
    ,

    formate(time) 
      if (time >= 10) 
        return time;
       else 
        return `0$time`;
      
    
  

</script>

✍ 二、页面使用

<template>
  <div>
    <countdown :endTime='endTime'></countdown>
  </div>
</template>
<script>
import countdown from './components/CountDown'   //  引入倒计时组件
export  default 
  components:
    countdown
  ,
  data()
    return
      //剩余时间
      endTime : '2022-07-1 11:59:00'
    
  


</script>