vue封装一个时间组件

以下是一个简单的时间组件示例，它可以显示当前时间并可以通过传递参数来自定义时间格式。

<template>
  <div class="time">
    {{ currentTime }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      format: this.format || 'hh:mm:ss A', // 默认时间格式
      currentTime: null // 当前时间
    }
  },
  mounted() {
    this.updateTime()
    setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  methods: {
    updateTime() {
      const date = new Date()
      let hours = date.getHours()
      const minutes = date.getMinutes()
      const seconds = date.getSeconds()
      const ampm = hours >= 12 ? 'PM' : 'AM'
      hours %= 12
      hours = hours || 12
      const timeString = this.format
        .replace('hh', ('0' + hours).slice(-2))
        .replace('mm', ('0' + minutes).slice(-2))
        .replace('ss', ('0' + seconds).slice(-2))
        .replace('A', ampm)
      this.currentTime = timeString
    }
  },
  props: {
    format: String // 自定义时间格式
  }
}
</script>

<style>
.time {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  padding: 20px;
}
</style>

使用示例：

<template>
  <div>
    <Time />
    <Time format="hh:mm" />
    <Time format="hh:mm:ss A" />
  </div>
</template>

<script>
import Time from './Time.vue'

export default {
  components: {
    Time
  }
}
</script>

在上面的示例中，我们通过在组件中定义一个名为 `format` 的 prop 来允许用户自定义时间格式。如果没有传递 `format` 参数，则默认为 `hh:mm:ss A` 格式。我们还使用 `setInterval` 函数每秒钟更新一次当前时间。