vue 数据大屏，一般都会在右上角或者左上角显示日期，日期格式多种多样，年月日时分秒周等，将这些类型封装成一个组件，后期可以直接拿来复用，节省时间。

/**
* @Author: 858834013@qq.com
* @Name: dayTime
* @Date: 2022-7-17
* @Desc: dayTime Week
*/
<template>
  <div class="dateTime">
    {{ date }} <span>{{ time }}</span><span>星期{{ week }}</span>
  </div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  name: "dayTime",
  components: {},
  data() {
    return {
      date: dayjs().format("YYYY.MM.DD"),
      time: dayjs().format("HH:mm分:秒"),
    }
  },
  computed: {
    week() {
      var datas = dayjs().day()
      var week = ['日', '一', '二', '三', '四', '五', '六']
      return week[datas]
    }
  },
  watch: {},
  mounted() {
    var that = this;
    setInterval(function () {
      that.time = dayjs().format("HH时mm分ss秒");
    }, 1000);
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.dateTime {
  display: flex;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #45BEFF;
  opacity: 0.8;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  margin-left: 17px;

  span {
    margin-left: 20px;
  }
}
</style>

使用实例

vue数据大屏 重要目标预警与智慧分析系统