vue 数据可视化大屏顶部添加实时更新时间

vue yekong

数据可视化大屏项目开发过程中会在大屏顶部左侧或者右侧显示实时的日期时间,效果如下:

vue 数据可视化大屏顶部添加实时更新时间

首先需要安装并配置dayjs库,并导入必要的插件以支持显示星期。接着,在Vue组件中设置一个定时器来实时更新时间。

安装 dayjs

npm install dayjs

配置 dayjs

在Vue组件文件或一个单独的配置文件中:


import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'  // 导入中文语言包
import weekOfYear from 'dayjs/plugin/weekOfYear'
import weekday from 'dayjs/plugin/weekday'

dayjs.extend(weekOfYear)
dayjs.extend(weekday)
dayjs.locale('zh-cn')  // 设置语言为中文

在Vue组件中实时更新时间

<template>
  <div>
    {{ currentTime }}
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      currentTime: ''
    }
  },
  mounted() {
    this.updateTime()
    // 每秒更新一次时间
    this.interval = setInterval(this.updateTime, 1000)
  },
  beforeDestroy() {
    // 清除定时器,防止内存泄漏
    clearInterval(this.interval)
  },
  methods: {
    updateTime() {
      // 按照“2023年 01月 03日 22:08:56 星期二”的格式更新时间
      this.currentTime = dayjs().format('YYYY年 MM月 DD日 HH:mm:ss dddd')
    }
  }
}
</script>
喜欢