Commit eb37e68cd405cd94194bdeaf40e5fe6790d580ca
1 parent
42f644a3
update Time
Showing
3 changed files
with
132 additions
and
4 deletions
Show diff stats
examples/routers/time.vue
1 | 1 | <template> |
2 | 2 | <div> |
3 | - <Time :time="1526552777" /> | |
3 | + <Time :time="1526608921" /> | |
4 | + <Time :time="1652839997" /> | |
5 | + <Time :time="ddd" /> | |
4 | 6 | </div> |
5 | 7 | </template> |
6 | 8 | <script> |
7 | 9 | export default { |
8 | 10 | data () { |
9 | - return {}; | |
11 | + return { | |
12 | + ddd: new Date('2018-01-01') | |
13 | + }; | |
10 | 14 | }, |
11 | 15 | computed: {}, |
12 | 16 | methods: {} | ... | ... |
1 | +const time = { | |
2 | + getUnix (place) { | |
3 | + const date = new Date(); | |
4 | + const timestamp = date.getTime(); // 得到的是毫秒 | |
5 | + | |
6 | + if (place === 's') { // 秒 | |
7 | + return Math.floor(timestamp / 1000); | |
8 | + } else { // 毫秒 | |
9 | + return timestamp; | |
10 | + } | |
11 | + }, | |
12 | + getToday (place) { | |
13 | + const today = new Date(); | |
14 | + const year = today.getFullYear(); | |
15 | + const month = today.getMonth() + 1; | |
16 | + const day = today.getDate(); | |
17 | + const hours = 0; | |
18 | + const mins = 0; | |
19 | + const secs = 0; | |
20 | + const datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + secs; | |
21 | + let tmp_datetime = datetime.replace(/:/g,'-'); | |
22 | + tmp_datetime = tmp_datetime.replace(/ /g,'-'); | |
23 | + const arr = tmp_datetime.split('-'); | |
24 | + const now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5])); | |
25 | + | |
26 | + if (place === 's') { | |
27 | + return parseInt(now.getTime() / 1000); | |
28 | + } else { | |
29 | + return parseInt(now.getTime()); | |
30 | + } | |
31 | + }, | |
32 | + getYear (place) { | |
33 | + const today = new Date(); | |
34 | + const year = today.getFullYear(); | |
35 | + const month = 0; | |
36 | + const day = 1; | |
37 | + const hours = 0; | |
38 | + const mins = 0; | |
39 | + const secs = 0; | |
40 | + const datetime = year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + secs; | |
41 | + let tmp_datetime = datetime.replace(/:/g,'-'); | |
42 | + tmp_datetime = tmp_datetime.replace(/ /g,'-'); | |
43 | + const arr = tmp_datetime.split('-'); | |
44 | + const now = new Date(Date.UTC(arr[0],arr[1]-1,arr[2],arr[3]-8,arr[4],arr[5])); | |
45 | + if (place === 's') { | |
46 | + return parseInt(now.getTime() / 1000); | |
47 | + } else { | |
48 | + return parseInt(now.getTime()); | |
49 | + } | |
50 | + }, | |
51 | + getLastDate (time, type) { | |
52 | + const unixtime = time * 1000; | |
53 | + const date = new Date(unixtime); | |
54 | + const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1; | |
55 | + const currentDate = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); | |
56 | + const hh = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); | |
57 | + const mm = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); | |
58 | + const ss = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); | |
59 | + | |
60 | + if (type === 'month') { | |
61 | + return month + '-' + currentDate + ' ' + hh + ':' + mm; | |
62 | + //return month + "-" + currentDate; | |
63 | + } else { | |
64 | + return date.getFullYear() + '-' + month + '-' + currentDate + ' ' + hh + ':' + mm; | |
65 | + } | |
66 | + }, | |
67 | + // 时间戳转详细时间,比如5分钟前 | |
68 | + getMagic (timestamp) { | |
69 | + const now = this.getUnix('s'); //当前时间戳 | |
70 | + const today = this.getToday('s'); //今天0点时间戳 | |
71 | + const year = this.getYear('s'); //今年0点时间戳 | |
72 | + const timer = now - timestamp; | |
73 | + | |
74 | + let tip = ''; | |
75 | + | |
76 | + if (timer <= 0) { | |
77 | + tip = '刚刚'; | |
78 | + } else if (Math.floor(timer/60) <= 0) { | |
79 | + tip = '刚刚'; | |
80 | + } else if (timer < 3600) { | |
81 | + tip = Math.floor(timer/60) + '分钟前'; | |
82 | + } else if (timer >= 3600 && (timestamp - today >= 0) ) { | |
83 | + tip = Math.floor(timer/3600) + '小时前'; | |
84 | + } else if (timer/86400 <= 31) { | |
85 | + tip = Math.ceil(timer/86400) + '天前'; | |
86 | + } else if (timestamp - today < 0 && (timestamp - year >= 0)) { | |
87 | + tip = this.getLastDate(timestamp, 'month'); | |
88 | + } else { | |
89 | + tip = this.getLastDate(timestamp, 'year'); | |
90 | + } | |
91 | + return tip; | |
92 | + } | |
93 | +}; | |
94 | + | |
95 | +export default function (timestamp) { | |
96 | + return time.getMagic(timestamp / 1000); | |
97 | +} | |
0 | 98 | \ No newline at end of file | ... | ... |
src/components/time/time.vue
... | ... | @@ -5,6 +5,7 @@ |
5 | 5 | import Vue from 'vue'; |
6 | 6 | const isServer = Vue.prototype.$isServer; |
7 | 7 | import { oneOf } from '../../utils/assist'; |
8 | + import Time from './time'; | |
8 | 9 | |
9 | 10 | const prefixCls = 'ivu-time'; |
10 | 11 | |
... | ... | @@ -12,7 +13,7 @@ |
12 | 13 | name: 'Time', |
13 | 14 | props: { |
14 | 15 | time: { |
15 | - type: [String, Number, Date], | |
16 | + type: [Number, Date], | |
16 | 17 | required: true |
17 | 18 | }, |
18 | 19 | type: { |
... | ... | @@ -51,7 +52,33 @@ |
51 | 52 | if (this.hash !== '') window.location.hash = this.hash; |
52 | 53 | }, |
53 | 54 | setTime () { |
54 | - this.date = this.time; | |
55 | + const type = typeof this.time; | |
56 | + let time; | |
57 | + | |
58 | + if (type === 'number') { | |
59 | + const timestamp = this.time.toString().length > 10 ? this.time : this.time * 1000; | |
60 | + time = (new Date(timestamp)).getTime(); | |
61 | + } else if (type === 'object') { | |
62 | + time = this.time.getTime(); | |
63 | + } | |
64 | + | |
65 | + if (this.type === 'relative') { | |
66 | + this.date = Time(time); | |
67 | + } else { | |
68 | + const date = new Date(this.time); | |
69 | + const year = date.getFullYear(); | |
70 | + const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1); | |
71 | + const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate(); | |
72 | + const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours(); | |
73 | + const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes(); | |
74 | + const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds(); | |
75 | + | |
76 | + if (this.type === 'datetime') { | |
77 | + this.date = `${year}-${month}-${day} ${hour}:${minute}:${second}`; | |
78 | + } else if (this.type === 'date') { | |
79 | + this.date = `${year}-${month}-${day}`; | |
80 | + } | |
81 | + } | |
55 | 82 | } |
56 | 83 | }, |
57 | 84 | mounted () { | ... | ... |