- Time 相对时间
- 概述
- 代码示例
- API
- Time props
- Time props
Time 相对时间
概述
常用于表示几分钟前、几小时前等相对于此时此刻的时间描述。
代码示例
基础用法
设置一个时间戳或 Date,可自动转为相对于当前的时间。
<template>
<div>
<Time :time="time1" />
<br>
<Time :time="time2" />
</div>
</template>
<script>
export default {
data () {
return {
time1: (new Date()).getTime() - 60 * 3 * 1000,
time2: (new Date()).getTime() - 86400 * 3 * 1000
}
}
}
</script>
自动更新间隔
设置自动更新间隔,默认为 60 秒。
<template>
<Time :time="time3" :interval="1" />
</template>
<script>
export default {
data () {
return {
time3: new Date()
}
}
}
</script>
不同类型
可以根据情况,设置不同的显示类型。
<template>
<div>
<Time :time="time2" />
<br>
<Time :time="time2" type="date" />
<br>
<Time :time="time2" type="datetime" />
</div>
</template>
<script>
export default {
data () {
return {
time2: (new Date()).getTime() - 86400 * 3 * 1000
}
}
}
</script>
锚点
设置 hash
属性,相对时间可以点击并定位锚点。
<template>
<Time :time="time2" hash="#hash" />
</template>
<script>
export default {
data () {
return {
time2: (new Date()).getTime() - 86400 * 3 * 1000
}
}
}
</script>
API
Time props
属性 | 说明 | 类型 | 默认值 |
---|---|---|---|
time | 需要对比的时间,可以是时间戳或 Date 类型 | Number | Date | String | - |
type | 类型,可选值为 relative、date 或 datetime | String | relative |
interval | 自动更新的间隔,单位:秒 | Number | 60 |
hash | 填写该值,点击会定位锚点 | String | - |