实时获取时间

src/layout/components/SideBar/UserIcon.vue

@@ -42,9 +42,9 @@
     <!-- 时间 -->
     <div class="time_box">
       <!-- #TODO 动态获取实时变化 -->
-      <span class="time_day">2023-08-09</span>
-      <span class="time_weekday">星期三</span>
-      <span class="time_date">14:20:22</span>
+      <span class="time_day">{{fmtTime?fmtTime[0]:null}}</span>
+      <span class="time_weekday">星期{{weekday}}</span>
+      <span class="time_date">{{fmtTime?fmtTime[1]:null}}</span>
     </div>
     <div class="header_user_line">|</div>
     <!-- 图标 -->
@@ -63,14 +63,41 @@
 </template>
 
 <script>
+import { formatDate } from "@/utils/common";
 export default {
   data() {
-    return {};
+    return {
+      // 当前时间
+      fmtTime :[],
+      // 星期数
+      weekday:'',
+      // 定时器
+      timer:''
+    };
   },
 
-  mounted() {},
+  mounted() {
+    // 创建定时器获取时间
+    setTimeout(() => {
+      this.getTime();
+    }, 1);
+    this.timer = setInterval(()=>{
+      this.getTime();
+    },1000)
+  },
+  beforeDestroy(){
+    clearInterval(timer)
+  },
 
-  methods: {},
+  methods: {
+    // 获取并格式化当前时间
+    getTime() {
+      const time = new Date().getTime();
+      const thisDay = new Date().getDay()
+      this.weekday = ["日", "一", "二", "三", "四", "五", "六"][thisDay]
+      this.fmtTime = formatDate(time).split(' ')
+    },
+  },
 };
 </script>
 
@@ -94,6 +121,7 @@ export default {
     .time_date {
       font-family: DS4Font;
       margin-right: 2rem;
+      width: 3.5rem;
     }
   }
   .icon_box {
@@ -127,9 +155,11 @@ export default {
 }
 ::v-deep .el-menu-item {
   height: 48px !important;
-  font-size: 1.33rem;
+  font-size: 1.33rem !important;
   line-height: 48px !important;
   color: #516380 !important;
+  padding: 0 !important;
+  margin-right: 2rem !important;
 }
 ::v-deep .is-active {
   border-bottom: 4px solid #134bea !important;

src/utils/common.js

@@ -0,0 +1,29 @@
+/**
+ * 时间格式化
+ */
+export function formatDate(cellValue) {
+   if (cellValue == null || cellValue === "") return "";
+   const date = new Date(cellValue)
+   const year = date.getFullYear()
+   const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+   const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+   const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
+   const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
+   const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
+   return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
+ }
+ Date.prototype.Format = function(fmt) {
+   var o = {
+       "M+": this.getMonth() + 1, //月份
+       "d+": this.getDate(), //日
+       "h+": this.getHours(), //小时
+       "m+": this.getMinutes(), //分
+       "s+": this.getSeconds(), //秒
+       "q+": Math.floor((this.getMonth() + 3) / 3), //季度
+       "S": this.getMilliseconds() //毫秒
+   };
+   if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
+   for (var k in o)
+       if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+   return fmt;
+}