vue项目可视化大屏顶部时间的显示

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>