1
0
mirror of https://github.com/hotomoe/hotomoe synced 2024-12-17 16:18:13 +09:00
hotomoe/src/web/app/common/views/components/time.vue

64 lines
1.9 KiB
Vue
Raw Normal View History

2018-02-05 14:25:19 +09:00
<template>
<time>
<span v-if=" mode == 'relative' ">{{ relative }}</span>
<span v-if=" mode == 'absolute' ">{{ absolute }}</span>
<span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>
2017-02-21 19:10:07 +09:00
</time>
2018-02-05 14:25:19 +09:00
</template>
2016-12-29 07:49:51 +09:00
2018-02-07 18:47:29 +09:00
<script lang="typescript">
2018-02-09 18:28:06 +09:00
import Vue from 'vue';
export default Vue.extend({
2018-02-05 14:25:19 +09:00
props: ['time', 'mode'],
2018-02-08 14:25:49 +09:00
data() {
return {
mode: 'relative',
2018-02-09 18:28:06 +09:00
tickId: null,
now: new Date()
2018-02-08 14:25:49 +09:00
};
2018-02-05 14:25:19 +09:00
},
2018-02-09 18:28:06 +09:00
computed: {
absolute() {
return (
this.time.getFullYear() + '年' +
(this.time.getMonth() + 1) + '月' +
this.time.getDate() + '日' +
' ' +
this.time.getHours() + '時' +
this.time.getMinutes() + '分');
},
relative() {
const ago = (this.now - this.time) / 1000/*ms*/;
return (
ago >= 31536000 ? '%i18n:common.time.years_ago%' .replace('{}', ~~(ago / 31536000)) :
ago >= 2592000 ? '%i18n:common.time.months_ago%' .replace('{}', ~~(ago / 2592000)) :
ago >= 604800 ? '%i18n:common.time.weeks_ago%' .replace('{}', ~~(ago / 604800)) :
ago >= 86400 ? '%i18n:common.time.days_ago%' .replace('{}', ~~(ago / 86400)) :
ago >= 3600 ? '%i18n:common.time.hours_ago%' .replace('{}', ~~(ago / 3600)) :
ago >= 60 ? '%i18n:common.time.minutes_ago%'.replace('{}', ~~(ago / 60)) :
ago >= 10 ? '%i18n:common.time.seconds_ago%'.replace('{}', ~~(ago % 60)) :
ago >= 0 ? '%i18n:common.time.just_now%' :
ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%');
}
},
2018-02-08 14:25:49 +09:00
created() {
2017-02-21 19:10:07 +09:00
if (this.mode == 'relative' || this.mode == 'detail') {
this.tick();
2018-02-05 14:25:19 +09:00
this.tickId = setInterval(this.tick, 1000);
2017-02-21 19:10:07 +09:00
}
2018-02-05 14:25:19 +09:00
},
2018-02-08 14:25:49 +09:00
destroyed() {
2017-02-21 19:10:07 +09:00
if (this.mode === 'relative' || this.mode === 'detail') {
2018-02-05 14:25:19 +09:00
clearInterval(this.tickId);
2017-02-21 19:10:07 +09:00
}
2018-02-05 14:25:19 +09:00
},
2018-02-08 14:25:49 +09:00
methods: {
tick() {
2018-02-09 18:28:06 +09:00
this.now = new Date();
2018-02-08 14:25:49 +09:00
}
2018-02-05 14:25:19 +09:00
}
2018-02-09 18:28:06 +09:00
});
2018-02-05 14:25:19 +09:00
</script>