chenhaodong / mew-iview

Commit 92ffd65ddad4dc2ee2ce2677708b36d446a91401

Authored by Aresn
Committed by GitHub
2 parents 6bdba667 28295360

Merge pull request #3645 from icarusion/Time-component 

add Time component
Showing 9 changed files with 218 additions and 1 deletions   Show diff stats
Inline Side-by-side
examples/app.vue
  Show/Hide comments   View file @92ffd65
... ... @@ -62,6 +62,7 @@ nav {
62 62 <li><router-link to="/color-picker">ColorPicker</router-link></li>
63 63 <li><router-link to="/auto-complete">AutoComplete</router-link></li>
64 64 <li><router-link to="/scroll">Scroll</router-link></li>
  65 + <li><router-link to="/time">Time</router-link></li>
65 66 </ul>
66 67 </nav>
67 68 <router-view></router-view>
... ...
examples/main.js
  Show/Hide comments   View file @92ffd65
... ... @@ -202,6 +202,10 @@ const router = new VueRouter({
202 202 {
203 203 path: '/scroll',
204 204 component: (resolve) => require(['./routers/scroll.vue'], resolve)
  205 + },
  206 + {
  207 + path: '/time',
  208 + component: (resolve) => require(['./routers/time.vue'], resolve)
205 209 }
206 210 ]
207 211 });
... ...
examples/routers/time.vue 0 → 100644
  Show/Hide comments   View file @92ffd65
  1 +<template>
  2 + <div>
  3 + <Time :time="1526608921" />
  4 + <Time :time="1652839997" />
  5 + <Time :time="ddd" :interval="1" />
  6 + </div>
  7 +</template>
  8 +<script>
  9 + export default {
  10 + data () {
  11 + return {
  12 + ddd: new Date('2018-04-27 14:23:00')
  13 + };
  14 + },
  15 + computed: {},
  16 + methods: {}
  17 + };
  18 +</script>
0 19 \ No newline at end of file
... ...
src/components/time/index.js 0 → 100644
  Show/Hide comments   View file @92ffd65
  1 +import Time from './time.vue';
  2 +export default Time;
0 3 \ No newline at end of file
... ...
src/components/time/time.js 0 → 100644
  Show/Hide comments   View file @92ffd65
  1 +/**
  2 + * @param {Number} timeStamp 判断时间戳格式是否是毫秒
  3 + * @returns {Boolean}
  4 + */
  5 +// const isMillisecond = timeStamp => {
  6 +// const timeStr = String(timeStamp)
  7 +// return timeStr.length > 10
  8 +// }
  9 +
  10 +/**
  11 + * @param {Number} timeStamp 传入的时间戳
  12 + * @param {Number} currentTime 当前时间时间戳
  13 + * @returns {Boolean} 传入的时间戳是否早于当前时间戳
  14 + */
  15 +const isEarly = (timeStamp, currentTime) => {
  16 + return timeStamp < currentTime;
  17 +};
  18 +
  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 +};
  27 +
  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 +};
  45 +
  46 +/**
  47 + * @param {String|Number} timeStamp 时间戳
  48 + * @returns {String} 相对时间字符串
  49 + */
  50 +export const getRelativeTime = timeStamp => {
  51 + // 判断当前传入的时间戳是秒格式还是毫秒
  52 + const IS_MILLISECOND = true;
  53 + // 如果是毫秒格式则转为秒格式
  54 + if (IS_MILLISECOND) Math.floor(timeStamp /= 1000);
  55 + // 传入的时间戳可以是数值或字符串类型，这里统一转为数值类型
  56 + timeStamp = Number(timeStamp);
  57 + // 获取当前时间时间戳
  58 + const currentTime = Math.floor(Date.parse(new Date()) / 1000);
  59 + // 判断传入时间戳是否早于当前时间戳
  60 + const IS_EARLY = isEarly(timeStamp, currentTime);
  61 + // 获取两个时间戳差值
  62 + let diff = currentTime - timeStamp;
  63 + // 如果IS_EARLY为false则差值取反
  64 + if (!IS_EARLY) diff = -diff;
  65 + let resStr = '';
  66 + const dirStr = IS_EARLY ? '前' : '后';
  67 + // 少于等于59秒
  68 + if (diff <= 59) resStr = diff + '秒' + dirStr;
  69 + // 多于59秒，少于等于59分钟59秒
  70 + else if (diff > 59 && diff <= 3599) resStr = Math.floor(diff / 60) + '分钟' + dirStr;
  71 + // 多于59分钟59秒，少于等于23小时59分钟59秒
  72 + else if (diff > 3599 && diff <= 86399) resStr = Math.floor(diff / 3600) + '小时' + dirStr;
  73 + // 多于23小时59分钟59秒，少于等于29天59分钟59秒
  74 + else if (diff > 86399 && diff <= 2623859) resStr = Math.floor(diff / 86400) + '天' + dirStr;
  75 + // 多于29天59分钟59秒，少于364天23小时59分钟59秒，且传入的时间戳早于当前
  76 + else if (diff > 2623859 && diff <= 31567859 && IS_EARLY) resStr = getDate(timeStamp);
  77 + else resStr = getDate(timeStamp, 'year');
  78 + return resStr;
  79 +};
  80 +
  81 +export default function (timestamp) {
  82 + return getRelativeTime(timestamp);
  83 +}
0 84 \ No newline at end of file
... ...
src/components/time/time.vue 0 → 100644
  Show/Hide comments   View file @92ffd65
  1 +<template>
  2 + <span :class="classes" @click="handleClick">{{ date }}</span>
  3 +</template>
  4 +<script>
  5 + import Vue from 'vue';
  6 + const isServer = Vue.prototype.$isServer;
  7 + import { oneOf } from '../../utils/assist';
  8 + import Time from './time';
  9 +
  10 + const prefixCls = 'ivu-time';
  11 +
  12 + export default {
  13 + name: 'Time',
  14 + props: {
  15 + time: {
  16 + type: [Number, Date],
  17 + required: true
  18 + },
  19 + type: {
  20 + type: String,
  21 + validator (value) {
  22 + return oneOf(value, ['relative', 'date', 'datetime']);
  23 + },
  24 + default: 'relative'
  25 + },
  26 + hash: {
  27 + type: String,
  28 + default: ''
  29 + },
  30 + interval: {
  31 + type: Number,
  32 + default: 60
  33 + }
  34 + },
  35 + data () {
  36 + return {
  37 + date: ''
  38 + };
  39 + },
  40 + computed: {
  41 + classes () {
  42 + return [
  43 + `${prefixCls}`,
  44 + {
  45 + [`${prefixCls}-with-hash`]: this.hash
  46 + }
  47 + ];
  48 + }
  49 + },
  50 + methods: {
  51 + handleClick () {
  52 + if (this.hash !== '') window.location.hash = this.hash;
  53 + },
  54 + setTime () {
  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 + }
  82 + }
  83 + },
  84 + mounted () {
  85 + this.setTime();
  86 + if (isServer) return;
  87 + this.timer = setInterval(() => {
  88 + this.setTime();
  89 + }, 1000 * this.interval);
  90 + },
  91 + beforeDestroy () {
  92 + if (this.timer) clearInterval(this.timer);
  93 + }
  94 + };
  95 +</script>
0 96 \ No newline at end of file
... ...
src/index.js
  Show/Hide comments   View file @92ffd65
... ... @@ -42,6 +42,7 @@ import Switch from &#39;./components/switch&#39;;
42 42 import Table from './components/table';
43 43 import Tabs from './components/tabs';
44 44 import Tag from './components/tag';
  45 +import Time from './components/time';
45 46 import Timeline from './components/timeline';
46 47 import TimePicker from './components/time-picker';
47 48 import Tooltip from './components/tooltip';
... ... @@ -114,6 +115,7 @@ const components = {
114 115 Tabs: Tabs,
115 116 TabPane: Tabs.Pane,
116 117 Tag,
  118 + Time,
117 119 Timeline,
118 120 TimelineItem: Timeline.Item,
119 121 TimePicker,
... ... @@ -138,7 +140,8 @@ const iview = {
138 140 iProgress: Progress,
139 141 iSelect: Select,
140 142 iSwitch: Switch,
141   - iTable: Table
  143 + iTable: Table,
  144 + iTime: Time
142 145 };
143 146  
144 147 const install = function(Vue, opts = {}) {
... ...
src/styles/components/index.less
  Show/Hide comments   View file @92ffd65
... ... @@ -44,3 +44,4 @@
44 44 @import "avatar";
45 45 @import "color-picker";
46 46 @import "auto-complete";
  47 +@import "time";
47 48 \ No newline at end of file
... ...
src/styles/components/time.less 0 → 100644
  Show/Hide comments   View file @92ffd65
  1 +@time-prefix-cls: ~"@{css-prefix}time";
  2 +
  3 +.@{time-prefix-cls} {
  4 + &-with-hash{
  5 + cursor: pointer;
  6 + &:hover{
  7 + text-decoration: underline;
  8 + }
  9 + }
  10 +}
0 11 \ No newline at end of file
... ...