ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 其他分享> 文章详细

Vue自行封装常用组件-倒计时

2019-10-24 10:55:46  阅读：211  来源： 互联网

标签：60 Vue 封装 default height 倒计时 seconds ms day


倒计时组件，比较复杂一点，大神勿调侃，精确到毫秒，因为项目中多次出现倒计时，所以拿出来分享下

使用方法：
1.在父组件中引入"uni-countdown"
//import uniCountdown from "./uni-countdown";

2.在父组件中注册 uniCountdown
//components:{uniCountdown},

3.放在父组件中使用
//<uni-countdown></uni-countdown> 参数代码太多直接看文件里面的吧

4.调用uniCountdown组件
//this.StatusLock = true

注：index.vue为父组件，后者为子组件，效果图先上，可以先看是否是自己想要的组件，再选择使用

index.vue

<template>
  <div>
    <div class="TimingBox" v-show="StatusLock">
      <div>
        <p class="texttitle">您的粉丝为您创造{{Amount}}元奖励</p>
        <p class="text">倒计时结束您将永远失去他们</p>
        <div class="ContentOfTheTiming">
          <div style="font-size:.6rem;" class="flex center">
            <uni-countdown
              bordercolor="#FFAA00"
              background="url('/wxviews/img/组10.png') center center"
              fontSize=".7rem"
              splitorColor="#fa0"
              :show-day="false"
              :hour="cdHours"
              :minute="cdMins"
              :second="cdSecs"
              :ms="cdMs"
            ></uni-countdown>
          </div>
        </div>
        <p class="become_a_Member">点击“立即解锁”获得该奖励</p>
        <div class="bigBoxBtn flex center" @click="TheBuyButton()">
          <div class="TheBuyButton">立即获得</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import uniCountdown from "../components/uni-countdown";

export default {
  data() {
    return {
      // 时
      cdHours: 0,
      // 分
      cdMins: 0,
      // 秒
      cdSecs: 0,
      // 毫秒
      cdMs: 60,

      Statuslock: false,
      productDetail: {},
      Amount: null
    };
  },
  components:{
      uniCountdown
  },
  created() {
    //在钩子里面先请求接口拿到时间
    this.CountDown();
  },
  methods: {
    CountDown() {
      //请求方式，看你们自己想用啥 就用啥 
      Request.post(
        "api/Post_GetCommissionOrderCountdown",
        {
          MemLoginId: localStorage.getItem("MemLoginId")
        },
        res => {
          
          this.productDetail = res;
          this.Amount = res.Amount;
          //执行showTime()
          const countDownArr = this.showTime(
            null,
            // 拿到结束时间 EndTime
            this.productDetail.EndTime
          ).split("-");
          //Status ? 1 : 0 
          if (res.Status === 0) {
            // 控制显示或隐藏 StatusLock
            this.StatusLock = false;
            return;
          }
          if ((this.cdHours = 0 && this.cdMins == 0 && this.cdSecs == 0)) {
            this.StatusLock = false;
            return;
          }
          if (this.cdHours > 0 || this.cdMins > 0 || this.cdSecs > 0) {
            this.StatusLock = true;
            this.cdHours = countDownArr[0] * 24 + countDownArr[1];
            this.cdMins = countDownArr[2];
            this.cdSecs = countDownArr[3];
            return;
          }
          if (res.Status === 1) {
            this.StatusLock = true;
            this.cdHours = countDownArr[0] * 24 + countDownArr[1];
            this.cdMins = countDownArr[2];
            this.cdSecs = countDownArr[3];
            return;
          }
        },
        err => {}
      );
    },
    TheBuyButton(){
        alert('暂时还没有开放此功能')
    },
    showTime(startTimeStr, endTimeStr) {
      var startTime = startTimeStr
        ? new Date(startTimeStr.replace(/-/g, "/"))
        : new Date();
      var endTime = new Date(endTimeStr.replace(/-/g, "/"));
      var totalSecs = (endTime - startTime) / 1000;
      var days = Math.floor(totalSecs / 3600 / 24);
      var hours = Math.floor((totalSecs - days * 24 * 3600) / 3600);
      var mins = Math.floor((totalSecs - days * 24 * 3600 - hours * 3600) / 60);
      var secs = Math.floor(
        totalSecs - days * 24 * 3600 - hours * 3600 - mins * 60
      );
      if ((days + "").slice(0, 1) != "-") {
        return days + "-" + hours + "-" + mins + "-" + secs;
      } else {
        return 0 + "-" + 0 + "-" + 0 + "-" + 0;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.TheBuyButton {
  width: 4rem;
  height: 1.2rem;
  background: linear-gradient(
    90deg,
    rgba(254, 239, 54, 1) 0%,
    rgba(246, 197, 25, 1) 100%
  );
  box-shadow: 0px 0px 3px 0px rgba(115, 91, 6, 1);
  border-radius: 0.6rem;
  margin: 0 auto;
  position: relative;
  color: #735b06;
  font-size: 0.6rem;
  line-height: 1.2rem;
}
.TimingBox {
  width: 100%;
  background: #fff;
  height: 6.7rem;
}
.ContentOfTheTiming {
  width: 100%;
  height: 1rem;
  margin: 0 0 0.2rem 0;
}
.become_a_Member {
  color: #fff;
  font-size: 0.5rem;
}
.djs > div {
  width: 13.8rem;
  height: 6rem;
  margin: 0 auto;
  background-color: #fff;
  background: url("") no-repeat;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  border-radius: 0.5rem;
  box-sizing: border-box;
}
.bigBoxBtn {
  width: 4.3rem;
  height: 1.5rem;
  background: linear-gradient(
    90deg,
    rgba(254, 239, 54, 1) 0%,
    rgba(246, 197, 25, 1) 100%
  );
  box-shadow: 0px 1px 3px 0px rgba(115, 91, 6, 0.67);
  border-radius: 0.7rem;
  position: relative;
  margin: 0 auto;
  bottom: -0.2rem;
}
.center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
</style>

uni-countdown.vue

<template>
  <div class="uni-countdown">
    <div
      v-if="showDay"
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize}"
      class="uni-countdown__number">{{ d }}</div>
    <div
      v-if="showDay"
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">天</div>
    <div
    
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ h2 }}</p><hr class="hrxt"></div>
    <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '时' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i1 }}</p><hr class="hrxt"></div>
             <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ i2 }}</p><hr class="hrxt"></div>
    <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '分' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ s2 }}</p><hr class="hrxt"></div>
    <div
     <div
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">{{ showColon ? ':' : '秒' }}</div>
    <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms1 }}</p><hr class="hrxt"></div>
        <div
      :style="{borderColor:borderColor, color:color, background:background, fontSize:fontSize,backgroundSize:backgroundSize,backgroundRepeat:backgroundRepeat}"
      class="uni-countdown__number"><p style="line-height:1rem; margin:0;">{{ ms2 }}</p><hr class="hrxt"></div>
    <div
      v-if="!showColon"
      :style="{color:splitorColor}"
      class="uni-countdown__splitor">秒</div>
  </div>
</template>
<script>
export default {
  name: 'UniCountdown',
  props: {
    showDay: {
      type: Boolean,
      default: true
    },
    showColon: {
      type: Boolean,
      default: true
    },
        background: {
            type: String,
            default: '#FFFFFF'
        },
    backgroundColor: {
      type: String,
      default: '#FFFFFF'
    },
    borderColor: {
      type: String,
      default: '#000000'
    },
    backgroundImg: {
      type:String,
      default:""
    },
        fontSize: {
            type: String,
      default: '30px'
        },
    color: {
      type: String,
      default: '#fff'
    },
    splitorColor: {
      type: String,
      default: '#000000'
    },
    day: {
      type: Number,
      default: 0
    },
    hour: {
      type: Number,
      default: 0
    },
    minute: {
      type: Number,
      default: 0
    },
    second: {
      type: Number,
      default: 0
    },
    ms: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      timer: null,
      d: '00',
      h: '00',
            h1: '00',
            h2: '00',
      i: '00',
            i1: '00',
            i2: '00',
      s: '00',
            s1: '0',
      s2: '0',
      ms: '00',
            ms1: '0',
            ms2: '0',
      leftTime: 0,
      seconds: 0
    }
  },
  created: function (e) {
    this.seconds = this.toSeconds(this.day, this.hour, this.minute, this.second, this.ms)
    this.countDown()
    this.timer = setInterval(() => {
      this.seconds--
      if (this.seconds < 0) {
        this.timeUp()
        return
      }
      this.countDown()
    }, 1000/60)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  },
  methods: {
    toSeconds (day, hours, minutes, seconds, ms) {
      return (day * 60 * 60 * 60 * 24) + (hours * 60 * 60 * 60) + (minutes * 60 * 60)  + (seconds * 60) + ms
    },
    timeUp () {
      clearInterval(this.timer)
      this.$emit('timeup')
    },
    countDown () {
      var seconds = this.seconds
      var [day, hour, minute, second, ms] = [0, 0, 0, 0, 0]
      if (seconds > 0) {
        day = Math.floor(seconds / (60 * 60 * 60 * 24))
        hour = Math.floor(seconds / (60 * 60 * 60)) - (day * 24)
        minute = Math.floor(seconds / 60 / 60) - (day * 24 * 60) - (hour * 60)
        second = Math.floor(seconds / 60) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60)
        ms = Math.floor(seconds) - (day * 24 * 60 * 60 * 60) - (hour * 60 * 60 * 60) - (minute * 60 * 60) - (second * 60)
      } else {
        this.timeUp()
      }
      if (day < 10) {
        day = '0' + day
      }
      if (hour < 10) {
        hour = '0' + hour
      }
      if (minute < 10) {
        minute = '0' + minute
      }
      if (second < 10) {
        second = '0' + second
      }
      if (ms < 10) {
        ms = '0' + ms
      }
      this.d = day
      this.h = hour
            this.h1 = hour.toString().slice(0,1)
            this.h2 = hour.toString().slice(1,2)
      this.i = minute
            this.i1 = minute.toString().slice(0,1)
            this.i2 = minute.toString().slice(1,2)
      this.s = second
            this.s1 = second.toString().slice(0,1)
      this.s2 = second.toString().slice(1,2)
      this.ms = ms
            this.ms1 = ms.toString().slice(0,1)
      this.ms2 = ms.toString().slice(1,2)
    }
  }
}
</script>
<style lang="scss">
    $countdown-height:.8rem;
  .uni-countdown__number{
     background-size: 100% 100%;
  background-repeat: no-repeat;
  }
    .uni-countdown {
        padding: .04rem 0;
        display: inline-flex;
        flex-wrap: nowrap;
        justify-content: center;

        &__splitor {
            justify-content: center;
            line-height: $countdown-height;
            padding: 0 .1rem;
      font-size: .6rem;
                        
        }

        &__number {
            line-height: $countdown-height;
            justify-content: center;
            height: $countdown-height;
            border-radius: .12rem;
            margin: 0 .1rem;
            font-size: .7rem;
            font-weight: 500;
      width: .7rem;
      height: 1rem;
      box-sizing: border-box;
      background-size: 100% 100%;
    background-repeat: no-repeat;
        }
    }

</style>
<style lang="less">
  .hrxt{
    position: relative;
    top: -.9rem;
    left: 0;
    width: .6rem;
    border:1px solid #e5e5e5;
  }
</style>

 

标签：60,Vue,封装,default,height,倒计时,seconds,ms,day
来源： https://www.cnblogs.com/10ve/p/11730868.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有