在这里插入图片描述
如上图所示,有一个倒计时插件,使用的方式,给这个组件传个分钟和秒数就可以

下面是这个倒计时插件:



    <template>
      <div class="CountDown">
        <p>{{minute}}:{{second}}</p>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
    
    export default {
      name: 'CountDown',
      data () {
        return {
          minutes: 10,
          seconds: 10
        }
      },
      props: {
        countTime: {
          type: Object,
          default: () => { }
        }
      },
      mounted () {
        this.add()
      },
      methods: {
        num: function (n) {
          return n < 10 ? '0' + n : '' + n
        },
        add: function () {
          var _this = this
          var time = window.setInterval(function () {
            if (_this.seconds === 0 && _this.minutes !== 0) {
              _this.seconds = 59
              _this.minutes -= 1
            } else if (_this.minutes === 0 && _this.seconds === 0) {
              _this.seconds = 0
              window.clearInterval(time)
            } else {
              _this.seconds -= 1
            }
          }, 1000)
        }
      },
      watch: {
        countTime: {
          deep: true,
          immediate: true,
          handler: function (newVal) {
            this.minutes = newVal.minute;
            this.seconds = newVal.second;
          }
        },
        second: {
          handler (newVal) {
            this.num(newVal)
          }
        },
        minute: {
          handler (newVal) {
            this.num(newVal)
          }
        }
      },
      computed: {
        second: function () {
          return this.num(this.seconds)
        },
        minute: function () {
          return this.num(this.minutes)
        }
      }
    }
    </script>
    
    <style lang="less" scoped>
    .CountDown {
      color: #fff;
    }
    </style>



**使用方式:**

    import CountDown from './count_down'  //引入倒计时插件路径
    <template>
      <CountDown  :countTime="countTime"></CountDown>
    </template>
    data(){
          countTime: {
            minute: 11,
            second: 11
          }
    },
      components: {
        CountDown,
      }

这个插件很好用,有兴趣,可以直接拿在项目里面使用。

Logo

前往低代码交流专区

更多推荐