# Time

相对时间组件

## 代码演示

<CodePreview src="/doc-comp/timestamp" :height="460">
<details>
<summary>展开查看</summary>

```vue
<template>
  <PageWrapper title="时间组件示例">
    <CollapseContainer title="基础示例">
      <Time :value="state.time1" />
      <br />
      <Time :value="state.time2" />
    </CollapseContainer>

    <CollapseContainer title="定时更新" class="my-4">
      <Time :value="now" :step="1" />
      <br />
      <Time :value="now" :step="5" />
    </CollapseContainer>

    <CollapseContainer title="定时更新">
      <Time :value="now" mode="date" />
      <br />
      <Time :value="now" mode="datetime" />
      <br />
      <Time :value="now" />
    </CollapseContainer>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { PageWrapper } from '@eciol/ant-ui';
  import { CollapseContainer, Time } from '@eciol/share-ui';

  const now = new Date().getTime();
  const state = reactive({
    time1: now - 60 * 3 * 1000,
    time2: now - 86400 * 3 * 1000,
  });
</script>

```
</details>
</CodePreview>

## Usage

```vue
<template>
  <Time :value="state.time" />
</template>
<script lang="ts" setup>
  import { Time } from '@eciol/share-ui';

  const now = new Date().getTime();
  const state = reactive({
    time: now - 60 * 3 * 1000,
  });
</script>
```

## Props

| 属性 | 类型 | 默认值 | 可选值 | 说明 |
| --- | --- | --- | --- | --- |
| value | `string,Date,number` | - | - | 时间值 |
| step | `number` | `60` | - | 刷新时间 |
| mode | `string` | `relative` | - | 模式，date:日期，datetime:时间戳，relative:相对时间 |