Merge pull request #3645 from icarusion/Time-component

add Time component

examples/app.vue

@@ -62,6 +62,7 @@ nav {
                 <li><router-link to="/color-picker">ColorPicker</router-link></li>
                 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
                 <li><router-link to="/scroll">Scroll</router-link></li>
+                <li><router-link to="/time">Time</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

examples/main.js

@@ -202,6 +202,10 @@ const router = new VueRouter({
         {
             path: '/scroll',
             component: (resolve) => require(['./routers/scroll.vue'], resolve)
+        },
+        {
+            path: '/time',
+            component: (resolve) => require(['./routers/time.vue'], resolve)
         }
     ]
 });

examples/routers/time.vue

@@ -0,0 +1,18 @@
+<template>
+    <div>
+        <Time :time="1526608921" />
+        <Time :time="1652839997" />
+        <Time :time="ddd" :interval="1" />
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                ddd: new Date('2018-04-27 14:23:00')
+            };
+        },
+        computed: {},
+        methods: {}
+    };
+</script>

src/components/time/index.js

@@ -0,0 +1,2 @@
+import Time from './time.vue';
+export default Time;

src/components/time/time.js

@@ -0,0 +1,83 @@
+/**
+ * @param {Number} timeStamp 判断时间戳格式是否是毫秒
+ * @returns {Boolean}
+ */
+// const isMillisecond = timeStamp => {
+//     const timeStr = String(timeStamp)
+//     return timeStr.length > 10
+// }
+
+/**
+ * @param {Number} timeStamp 传入的时间戳
+ * @param {Number} currentTime 当前时间时间戳
+ * @returns {Boolean} 传入的时间戳是否早于当前时间戳
+ */
+const isEarly = (timeStamp, currentTime) => {
+    return timeStamp < currentTime;
+};
+
+/**
+ * @param {Number} num 数值
+ * @returns {String} 处理后的字符串
+ * @description 如果传入的数值小于10，即位数只有1位，则在前面补充0
+ */
+const getHandledValue = num => {
+    return num < 10 ? '0' + num : num;
+};
+
+/**
+ * @param {Number} timeStamp 传入的时间戳
+ * @param {Number} startType 要返回的时间字符串的格式类型，传入'year'则返回年开头的完整时间
+ */
+const getDate = (timeStamp, startType) => {
+    const d = new Date(timeStamp * 1000);
+    const year = d.getFullYear();
+    const month = getHandledValue(d.getMonth() + 1);
+    const date = getHandledValue(d.getDate());
+    const hours = getHandledValue(d.getHours());
+    const minutes = getHandledValue(d.getMinutes());
+    const second = getHandledValue(d.getSeconds());
+    let resStr = '';
+    if (startType === 'year') resStr = year + '-' + month + '-' + date + ' ' + hours + ':' + minutes + ':' + second;
+    else resStr = month + '-' + date + ' ' + hours + ':' + minutes;
+    return resStr;
+};
+
+/**
+ * @param {String|Number} timeStamp 时间戳
+ * @returns {String} 相对时间字符串
+ */
+export const getRelativeTime = timeStamp => {
+    // 判断当前传入的时间戳是秒格式还是毫秒
+    const IS_MILLISECOND = true;
+    // 如果是毫秒格式则转为秒格式
+    if (IS_MILLISECOND) Math.floor(timeStamp /= 1000);
+    // 传入的时间戳可以是数值或字符串类型，这里统一转为数值类型
+    timeStamp = Number(timeStamp);
+    // 获取当前时间时间戳
+    const currentTime = Math.floor(Date.parse(new Date()) / 1000);
+    // 判断传入时间戳是否早于当前时间戳
+    const IS_EARLY = isEarly(timeStamp, currentTime);
+    // 获取两个时间戳差值
+    let diff = currentTime - timeStamp;
+    // 如果IS_EARLY为false则差值取反
+    if (!IS_EARLY) diff = -diff;
+    let resStr = '';
+    const dirStr = IS_EARLY ? '前' : '后';
+    // 少于等于59秒
+    if (diff <= 59) resStr = diff + '秒' + dirStr;
+    // 多于59秒，少于等于59分钟59秒
+    else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr;
+    // 多于59分钟59秒，少于等于23小时59分钟59秒
+    else if (diff > 3599 && diff <= 86399) resStr = Math.floor(diff / 3600) + '小时' + dirStr;
+    // 多于23小时59分钟59秒，少于等于29天59分钟59秒
+    else if (diff > 86399 && diff <= 2623859) resStr = Math.floor(diff / 86400) + '天' + dirStr;
+    // 多于29天59分钟59秒，少于364天23小时59分钟59秒，且传入的时间戳早于当前
+    else if (diff > 2623859 && diff <= 31567859 && IS_EARLY) resStr = getDate(timeStamp);
+    else resStr = getDate(timeStamp, 'year');
+    return resStr;
+};
+
+export default function (timestamp) {
+    return getRelativeTime(timestamp);
+}

src/components/time/time.vue

@@ -0,0 +1,95 @@
+<template>
+    <span :class="classes" @click="handleClick">{{ date }}</span>
+</template>
+<script>
+    import Vue from 'vue';
+    const isServer = Vue.prototype.$isServer;
+    import { oneOf } from '../../utils/assist';
+    import Time from './time';
+
+    const prefixCls = 'ivu-time';
+
+    export default {
+        name: 'Time',
+        props: {
+            time: {
+                type: [Number, Date],
+                required: true
+            },
+            type: {
+                type: String,
+                validator (value) {
+                    return oneOf(value, ['relative', 'date', 'datetime']);
+                },
+                default: 'relative'
+            },
+            hash: {
+                type: String,
+                default: ''
+            },
+            interval: {
+                type: Number,
+                default: 60
+            }
+        },
+        data () {
+            return {
+                date: ''
+            };
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-with-hash`]: this.hash
+                    }
+                ];
+            }
+        },
+        methods: {
+            handleClick () {
+                if (this.hash !== '') window.location.hash = this.hash;
+            },
+            setTime () {
+                const type = typeof this.time;
+                let time;
+
+                if (type === 'number') {
+                    const timestamp = this.time.toString().length > 10 ? this.time : this.time * 1000;
+                    time = (new Date(timestamp)).getTime();
+                } else if (type === 'object') {
+                    time = this.time.getTime();
+                }
+
+                if (this.type === 'relative') {
+                    this.date = Time(time);
+                } else {
+                    const date = new Date(this.time);
+                    const year = date.getFullYear();
+                    const month = (date.getMonth() + 1) < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
+                    const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+                    const hour = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+                    const minute = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
+                    const second = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
+
+                    if (this.type === 'datetime') {
+                        this.date = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+                    } else if (this.type === 'date') {
+                        this.date = `${year}-${month}-${day}`;
+                    }
+                }
+            }
+        },
+        mounted () {
+            this.setTime();
+            if (isServer) return;
+            this.timer = setInterval(() => {
+                this.setTime();
+            }, 1000 * this.interval);
+        },
+        beforeDestroy () {
+            if (this.timer) clearInterval(this.timer);
+        }
+    };
+</script>

src/index.js

@@ -42,6 +42,7 @@ import Switch from './components/switch';
 import Table from './components/table';
 import Tabs from './components/tabs';
 import Tag from './components/tag';
+import Time from './components/time';
 import Timeline from './components/timeline';
 import TimePicker from './components/time-picker';
 import Tooltip from './components/tooltip';
@@ -114,6 +115,7 @@ const components = {
     Tabs: Tabs,
     TabPane: Tabs.Pane,
     Tag,
+    Time,
     Timeline,
     TimelineItem: Timeline.Item,
     TimePicker,
@@ -138,7 +140,8 @@ const iview = {
     iProgress: Progress,
     iSelect: Select,
     iSwitch: Switch,
-    iTable: Table
+    iTable: Table,
+    iTime: Time
 };
 
 const install = function(Vue, opts = {}) {

src/styles/components/index.less

@@ -44,3 +44,4 @@
 @import "avatar";
 @import "color-picker";
 @import "auto-complete";
+@import "time";

src/styles/components/time.less

@@ -0,0 +1,10 @@
+@time-prefix-cls: ~"@{css-prefix}time";
+
+.@{time-prefix-cls} {
+    &-with-hash{
+        cursor: pointer;
+        &:hover{
+            text-decoration: underline;
+        }
+    }
+}