vue moment 当前日期时间格式化实时更新组件

vue yekong

在做vue大屏项目开发时,经常会遇到,实时显示当前时间年月日时分秒。发现这个当前时间也用的很多,封装起来方便以后直接拿来用。

/**
* @Author: 858834013@qq.com
* @Name: DateFormat
* @Date: 2022-01-17
* @Desc: 当前日期时间格式化实时更新
*/
<template>
  <div>
    {{ dataTime }}
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'currentTimeFormat',
  components: {},
  props: {
    format: {
      type: String,
      default() {
        return 'YYYY-MM-DD HH:mm:ss'
      }
    },
    // 是否实时更新
    updatedInRealTime: {
      type: Boolean,
      default() {
        return true
      }
    }
  },
  data() {
    return {
      dataTime: '',
    }
  },
  mounted() {
    var that = this
    that.dataTime = moment().format(this.format)
    if (that.updatedInRealTime) {
      setInterval(function () {
        that.dataTime = moment().format(that.format)
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

喜欢