witTime 时间显示组件

witTime是一个用于显示当前时间、日期和星期的组件，采用灵活的布局设计，支持自定义字体大小和样式，适用于各类需要展示时间信息的场景。

用法实例

vue

<template>
  <div>
    <!-- 基础用法 -->
    <witTime />
    
    <!-- 自定义字体大小 -->
    <witTime 
      leftFontSize="36px"
      rightTopFontSize="14px"
      rightBottomFontSize="12px"
    />
    
    <!-- 紧凑布局 -->
    <witTime 
      leftFontSize="24px"
      rightTopFontSize="12px"
      rightBottomFontSize="10px"
    />
  </div>
</template>

<script lang="ts" setup>
// 组件无需额外导入，直接使用即可
</script>

API

属性名	类型	默认值	描述
`leftFontSize`	[`String`]	-	左侧时间文本的字体大小
`rightTopFontSize`	[`String`]	-	右侧顶部星期文本的字体大小
`rightBottomFontSize`	[`String`]	-	右侧底部日期文本的字体大小

功能特性

实时时间显示：每秒自动更新当前时间，确保时间准确性
完整时间信息：同时显示时间（HH:mm:ss）、星期和日期（YYYY.MM.DD）
灵活的字体控制：支持分别设置左侧时间和右侧日期星期的字体大小
简洁布局：左侧大字体显示时间，右侧小字体显示日期和星期，视觉层次清晰
内置时钟图标：右侧区域包含时钟图标，增强视觉识别度

实现原理

时间更新机制：使用setInterval每秒调用getTime()函数更新时间显示
日期格式化：使用moment.js库格式化日期和时间，确保显示格式统一
星期计算：通过new Date().getDay()获取星期几，然后映射为中文显示
动态样式：利用Vue 3的v-bind语法实现CSS属性的动态绑定，支持自定义字体大小
响应式设计：组件采用flex布局，确保在不同容器中都能良好显示

TIP

组件依赖moment.js库进行日期时间处理，请确保项目中已正确安装
组件使用了wit-icon组件显示时钟图标，需要确保该组件可用
建议根据实际显示容器大小合理设置字体大小，避免显示异常
时间更新采用每秒刷新一次的策略，平衡了准确性和性能消耗

witTime 时间显示组件 ​

用法实例 ​

API ​

功能特性 ​

实现原理 ​

witTime 时间显示组件

用法实例

API

功能特性

实现原理