From 4d98e8ab6a410f0cf8071f7a79082e8250f37eb8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E6=9D=A8?= <1711467488@qq.com>
Date: Wed, 17 Jan 2018 09:46:39 +0800
Subject: [PATCH] no message

Former-commit-id: cd83c023d354b95d2f40566de248325ec404e71b
Former-commit-id: a5d857b37e8a93170e75e9e70fba63f0b3af3b06
Former-commit-id: c94bef7e8d329f33ea2721d87f730a1461c6eef8
---
 package.json                                  |  1 +
 src/assets/style/public-class.scss            |  4 +
 src/pages/demo/plugins/timeago/demo.vue       | 73 +++++++++++++++++++
 src/router/menu/_plugin.js                    | 26 +++++--
 .../markdownFiles/article/timeago演示代码.md  | 41 +++++++++++
 5 files changed, 139 insertions(+), 6 deletions(-)
 create mode 100644 src/pages/demo/plugins/timeago/demo.vue
 create mode 100644 static/markdownFiles/article/timeago演示代码.md

diff --git a/package.json b/package.json
index 2651865d..83bdeb46 100755
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "papaparse": "^4.3.6",
     "quill": "^1.3.4",
     "simplemde": "^1.11.2",
+    "timeago.js": "^3.0.2",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",
     "vue-router": "^3.0.1",
diff --git a/src/assets/style/public-class.scss b/src/assets/style/public-class.scss
index fd7471b9..cdda828e 100644
--- a/src/assets/style/public-class.scss
+++ b/src/assets/style/public-class.scss
@@ -15,6 +15,10 @@
 // 注意 这个文件里只写class
 // mixin等内容请在 public.scss 里书写
 
+// 文字相关
+.#{$prefix}-text-center {
+  text-align: center;
+}
 
 // 浮动相关
 .#{$prefix}-fl {
diff --git a/src/pages/demo/plugins/timeago/demo.vue b/src/pages/demo/plugins/timeago/demo.vue
new file mode 100644
index 00000000..6bd9f96a
--- /dev/null
+++ b/src/pages/demo/plugins/timeago/demo.vue
@@ -0,0 +1,73 @@
+<template>
+  <Container type="ghost">
+    <el-card class="dd-mb">
+      <PageHeader
+        title="基本示例"
+        url="https://github.com/hustcc/timeago.js">
+      </PageHeader>
+    </el-card>
+    <el-card class="dd-mb">
+      <div class="dd-text-center">
+        <h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
+        <p style="font-size: 10px;">请稍等一下 会自动刷新</p>
+      </div>
+    </el-card>
+    <el-card class="dd-mb">
+      <div class="dd-text-center">
+        <h1 style="font-size: 30px;">{{dateTimeRangeAgo}}</h1>
+        <el-date-picker
+          v-model="dateTimeRange"
+          type="datetimerange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </div>
+    </el-card>
+    <el-card>
+      <Markdown url="/static/markdownFiles/article/timeago演示代码.md"></Markdown>
+    </el-card>
+  </Container>
+</template>
+
+<script>
+import timeago from 'timeago.js'
+export default {
+  data () {
+    return {
+      // 打开页面时间
+      openPageDate: new Date(),
+      // 打开页面已经过去的时间
+      openPageDateAgo: '',
+      // 起止时间
+      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
+      // 上面起止时间的计算结果
+      dateTimeRangeAgo: ''
+    }
+  },
+  mounted () {
+    // 刷新打开页面过去的时间
+    this.refreshOpenPageDateAgo()
+    setInterval(this.refreshOpenPageDateAgo, 1000)
+    // 刷新起止时间的计算结果
+    this.refreshDateTimeRangeAgo()
+  },
+  watch: {
+    dateTimeRange () {
+      // 刷新起止时间的计算结果
+      this.refreshDateTimeRangeAgo()
+    }
+  },
+  methods: {
+    // 计算打开页面过了多久
+    refreshOpenPageDateAgo () {
+      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
+    },
+    // 计算起止时间间隔
+    refreshDateTimeRangeAgo () {
+      const timeagoInstance = timeago(this.dateTimeRange[1])
+      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
+    }
+  }
+}
+</script>
diff --git a/src/router/menu/_plugin.js b/src/router/menu/_plugin.js
index 8c84572f..374f2b3d 100644
--- a/src/router/menu/_plugin.js
+++ b/src/router/menu/_plugin.js
@@ -71,17 +71,17 @@ export const pluginMenu = {
         }
       ]
     },
-    // 可调布局组件
+    // 时间计算
     {
-      title: '可调布局',
-      icon: 'object-group',
+      title: '时间计算',
+      icon: 'clock-o',
       children: [
         {
           title: '基本示例',
           icon: 'file-o',
-          path: 'vue-splitpane/demo',
-          name: 'demo-plugin-vue-splitpane-demo',
-          component: resolve => { require(['@/pages/demo/plugins/vue-splitpane/demo.vue'], resolve) }
+          path: 'timeago/demo',
+          name: 'demo-plugin-timeago-demo',
+          component: resolve => { require(['@/pages/demo/plugins/timeago/demo.vue'], resolve) }
         }
       ]
     },
@@ -182,6 +182,20 @@ export const pluginMenu = {
           component: resolve => { require(['@/pages/demo/plugins/mock/ajax.vue'], resolve) }
         }
       ]
+    },
+    // 可调布局组件
+    {
+      title: '可调布局',
+      icon: 'object-group',
+      children: [
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'vue-splitpane/demo',
+          name: 'demo-plugin-vue-splitpane-demo',
+          component: resolve => { require(['@/pages/demo/plugins/vue-splitpane/demo.vue'], resolve) }
+        }
+      ]
     }
   ]
 }
diff --git a/static/markdownFiles/article/timeago演示代码.md b/static/markdownFiles/article/timeago演示代码.md
new file mode 100644
index 00000000..d6ca37c5
--- /dev/null
+++ b/static/markdownFiles/article/timeago演示代码.md
@@ -0,0 +1,41 @@
+```
+import timeago from 'timeago.js'
+export default {
+  data () {
+    return {
+      // 打开页面时间
+      openPageDate: new Date(),
+      // 打开页面已经过去的时间
+      openPageDateAgo: '',
+      // 起止时间
+      dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
+      // 上面起止时间的计算结果
+      dateTimeRangeAgo: ''
+    }
+  },
+  mounted () {
+    // 刷新打开页面过去的时间
+    this.refreshOpenPageDateAgo()
+    setInterval(this.refreshOpenPageDateAgo, 1000)
+    // 刷新起止时间的计算结果
+    this.refreshDateTimeRangeAgo()
+  },
+  watch: {
+    dateTimeRange () {
+      // 刷新起止时间的计算结果
+      this.refreshDateTimeRangeAgo()
+    }
+  },
+  methods: {
+    // 计算打开页面过了多久
+    refreshOpenPageDateAgo () {
+      this.openPageDateAgo = timeago().format(this.openPageDate, 'zh_CN')
+    },
+    // 计算起止时间间隔
+    refreshDateTimeRangeAgo () {
+      const timeagoInstance = timeago(this.dateTimeRange[1])
+      this.dateTimeRangeAgo = timeagoInstance.format(this.dateTimeRange[0], 'zh_CN')
+    }
+  }
+}
+```
\ No newline at end of file