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 () { | ... | ... |