chenhaodong / mew-iview

Commit de30f1b30d987810d1d7e157bc5ae8a6a8cd8b9a

Authored by 梁灏
1 parent 468bde3c

update Time func

Showing 2 changed files with 79 additions and 91 deletions   Show diff stats
Inline Side-by-side
examples/routers/time.vue
  Show/Hide comments   View file @de30f1b
@@ -2,14 +2,14 @@ @@ -2,14 +2,14 @@
2 <div> 2 <div>
3 <Time :time="1526608921" /> 3 <Time :time="1526608921" />
4 <Time :time="1652839997" /> 4 <Time :time="1652839997" />
5 - <Time :time="ddd" /> 5 + <Time :time="ddd" interval="1" />
6 </div> 6 </div>
7 </template> 7 </template>
8 <script> 8 <script>
9 export default { 9 export default {
10 data () { 10 data () {
11 return { 11 return {
12 - ddd: new Date('2018-01-01') 12 + ddd: new Date('2019-05-28 14:12:00')
13 }; 13 };
14 }, 14 },
15 computed: {}, 15 computed: {},
src/components/time/time.js
  Show/Hide comments   View file @de30f1b
1 -const time = {  
2 - getUnix (place) {  
3 - const date = new Date();  
4 - const timestamp = date.getTime(); // 得到的是毫秒 1 +/**
  2 + * @param {Number} timeStamp 判断时间戳格式是否是毫秒
  3 + * @returns {Boolean}
  4 + */
  5 +// const isMillisecond = timeStamp => {
  6 +// const timeStr = String(timeStamp);
  7 +// return timeStr.length > 10;
  8 +// };
5 9
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(); 10 +/**
  11 + * @param {Number} timeStamp 传入的时间戳
  12 + * @param {Number} currentTime 当前时间时间戳
  13 + * @returns {Boolean} 传入的时间戳是否早于当前时间戳
  14 + */
  15 +const isEarly = (timeStamp, currentTime) => {
  16 + return timeStamp < currentTime;
  17 +};
59 18
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; 19 +/**
  20 + * @param {Number} num 数值
  21 + * @returns {String} 处理后的字符串
  22 + * @description 如果传入的数值小于10，即位数只有1位，则在前面补充0
  23 + */
  24 +const getHandledValue = num => {
  25 + return num < 10 ? '0' + num : num;
  26 +};
73 27
74 - let tip = ''; 28 +/**
  29 + * @param {Number} timeStamp 传入的时间戳
  30 + * @param {Number} startType 要返回的时间字符串的格式类型，传入'year'则返回年开头的完整时间
  31 + */
  32 +const getDate = (timeStamp, startType) => {
  33 + const d = new Date(timeStamp * 1000);
  34 + const year = d.getFullYear();
  35 + const month = getHandledValue(d.getMonth() + 1);
  36 + const date = getHandledValue(d.getDate());
  37 + const hours = getHandledValue(d.getHours());
  38 + const minutes = getHandledValue(d.getMinutes());
  39 + const second = getHandledValue(d.getSeconds());
  40 + let resStr = '';
  41 + if (startType === 'year') resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second;
  42 + else resStr = month + '-' + date + ' ' + hours + ':' + minutes;
  43 + return resStr;
  44 +};
75 45
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 - } 46 +/**
  47 + * @param {String|Number} timeStamp 时间戳
  48 + * @returns {String} 相对时间字符串
  49 + */
  50 +export const getRelativeTime = timeStamp => {
  51 + // 判断当前传入的时间戳是秒格式还是毫秒
  52 + // const IS_MILLISECOND = isMillisecond(timeStamp);
  53 + const IS_MILLISECOND = true;
  54 + // 如果是毫秒格式则转为秒格式
  55 + if (IS_MILLISECOND) Math.floor(timeStamp /= 1000);
  56 + // 传入的时间戳可以是数值或字符串类型，这里统一转为数值类型
  57 + timeStamp = Number(timeStamp);
  58 + // 获取当前时间时间戳
  59 + const currentTime = Math.floor(Date.parse(new Date()) / 1000);
  60 + // 判断传入时间戳是否早于当前时间戳
  61 + const IS_EARLY = isEarly(timeStamp, currentTime);
  62 + // 获取两个时间戳差值
  63 + let diff = currentTime - timeStamp;
  64 + // 如果IS_EARLY为false则差值取反
  65 + if (!IS_EARLY) diff = -diff;
  66 + let resStr = '';
  67 + const dirStr = IS_EARLY ? '前' : '后';
  68 + // 少于等于59秒
  69 + if (diff <= 59) resStr = diff + '秒' + dirStr;
  70 + // 多于59秒，少于等于59分钟59秒
  71 + else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr;
  72 + // 多于59分钟59秒，少于等于23小时59分钟59秒
  73 + else if (diff > 3599 && diff <= 86399) resStr = Math.floor(diff / 3600) + '小时' + dirStr;
  74 + // 多于23小时59分钟59秒，少于等于29天59分钟59秒
  75 + else if (diff > 86399 && diff <= 2623859) resStr = Math.floor(diff / 86400) + '天' + dirStr;
  76 + // 多于29天59分钟59秒，少于364天23小时59分钟59秒
  77 + else if (diff > 2623859 && diff <= 31567859) resStr = getDate(timeStamp);
  78 + // 多于364天23小时59分钟59秒
  79 + else resStr = getDate(timeStamp, 'year');
  80 + return resStr;
93 }; 81 };
94 82
95 export default function (timestamp) { 83 export default function (timestamp) {
96 - return time.getMagic(timestamp / 1000); 84 + return getRelativeTime(timestamp);
97 } 85 }
98 \ No newline at end of file 86 \ No newline at end of file