sheng/mes-ui-d2
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #12 from FairyEver/dev

Browse Source 
timeago removed and add the dayjs

Former-commit-id: 66533b336178e705575efed441c7cd7f03af2807
Former-commit-id: 22353998033eb2b079c5e860353da157afb7fdbb
Former-commit-id: a9ed8244e2403578a6be4a7c38d2191f898f86b3
Former-commit-id: fe97b5e3a8358f64b988253b88e19e29a27d0442
This commit is contained in:
李杨
2018-06-12 14:56:35 +08:00
committed by GitHub
parent 1783e32b2a 4e4716ba76
commit 79e65923a0
37 changed files with 218 additions and 208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/.vuepress/config.js
View File

@@ -70,8 +70,7 @@ function sideBarPlugins () {
'data-export',
'data-import',
'i18n',
'mock',
'timeago'
'mock'
]
}

4
docs/zh/components/markdown.md
View File

@@ -5,7 +5,7 @@
| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- | --- |
| url | markdown文件地址 | 非 | String | | 无 |
| md | markdown内容 | 非 | String | | 无 |
| source | markdown内容 | 非 | String | | 无 |
| highlight | 代码高亮 | 非 | Boolean | | false |
| baidupan | 百度网盘分享链接显示优化 | 非 | Boolean | | true |
@@ -26,7 +26,7 @@ const md = `# Header
text`
<d2-markdown :md="md"/>
<d2-markdown :source="md"/>
```
## 百度网盘分享链接优化

2
docs/zh/guide/README.md
View File

@@ -34,7 +34,7 @@ d2admin-vue-element（以下简称 d2admin）是一个管理系统前端模板
* 图表自适应可拖拽大小的卡片容器（示例）
* 简化剪贴板操作
* 简化Cookie操作
* 时间计算工具
* 时间日期计算工具
* 导入 Excel （ xlsx 格式 + CSV 格式 ）
* 数据导出 Excel （ xlsx 格式 + CSV 格式 ）
* 数据导出文本

5
docs/zh/guide/change-log.md
View File

@@ -10,11 +10,14 @@
* [ 修改 ] 路由注册回归最简单的写法
* [ 修复 ] 首次加载 loading 样式类名和程序内类名冲突，新的加载类名使用 `d2-app-loading` 前缀
* [ 修改 ] 所有类似 `dd-` 的样式前缀(包括自动注册图标的id前缀)统一改为 `d2-`
* [ 修复 ] 修复 `highlight` 组件和 `markdown` 组件的样式冲突
* [ 修复 ] 修复 `d2-highlight` 组件和 `d2-markdown` 组件的样式冲突
* [ 修改 ] 内置组件名称统一改为 `d2-` 前缀，统一使用横线连接 (kebab-case) 风格
* [ 修改 ] 顶栏 logo 阴影删除
* [ 新增 ] 主题系统
* [ 新增 ] 三个主题，分别为 `d2admin 经典`，`简约线条`，`流星`
* [ 修改 ] `d2-markdown` 组件 `md` 参数改名为 `source`
* [ 修改 ] 删除了 `d2-markdown` 组件中图片的白色背景
* [ 修改 ] 删除 `timeago` 插件，更换为更强大的 `dayjs`
## v1.0.0

49
docs/zh/plugins/timeago.md
View File

@@ -1,49 +0,0 @@
# 时间差计算
``` js
import timeago from 'timeago.js'
export default {
data () {
return {
// 打开页面时间
openPageDate: new Date(),
// 打开页面已经过去的时间
openPageDateAgo: '',
// 打开页面时间计时器
dateTimeRangeTimer: null,
// 起止时间
dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
// 上面起止时间的计算结果
dateTimeRangeAgo: ''
}
},
mounted () {
// 刷新打开页面过去的时间
this.refreshOpenPageDateAgo()
this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
// 刷新起止时间的计算结果
this.refreshDateTimeRangeAgo()
},
beforeDestroy () {
// 清空计时器
clearInterval(this.dateTimeRangeTimer)
},
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')
}
}
}
```

2
package.json
View File

@@ -18,6 +18,7 @@
"axios": "^0.17.1",
"clipboard-polyfill": "^2.4.1",
"countup.js": "^1.9.3",
"dayjs": "^1.6.7",
"element-ui": "^2.0.11",
"file-saver": "^1.3.3",
"github-markdown-css": "^2.10.0",
@@ -31,7 +32,6 @@
"path-posix": "^1.0.0",
"quill": "^1.3.4",
"simplemde": "^1.11.2",
"timeago.js": "^3.0.2",
"vue": "^2.5.2",
"vue-grid-layout": "^2.1.11",
"vue-i18n": "^7.4.2",

3
src/assets/style/fixed/markdown.scss
View File

@@ -7,4 +7,7 @@
h1, h2 {
border-bottom: none;
}
img {
background-color: transparent;
}
}

52
src/assets/style/public-class.scss
View File

@@ -40,40 +40,26 @@
}
// 边距相关
.#{$prefix}-m { margin: $margin; }
.#{$prefix}-mt { margin-top: $margin; }
.#{$prefix}-mr { margin-right: $margin; }
.#{$prefix}-mb { margin-bottom: $margin; }
.#{$prefix}-ml { margin-left: $margin; }
$sizes: (0, 10, 15, 20);
.#{$prefix}-m-10 { margin: 10px; }
.#{$prefix}-mt-10 { margin-top: 10px; }
.#{$prefix}-mr-10 { margin-right: 10px; }
.#{$prefix}-mb-10 { margin-bottom: 10px; }
.#{$prefix}-ml-10 { margin-left: 10px; }
@for $index from 1 to 5 {
.#{$prefix}-m-#{nth($sizes, $index)} { margin: #{nth($sizes, $index)}px; }
.#{$prefix}-mt-#{nth($sizes, $index)} { margin-top: #{nth($sizes, $index)}px; }
.#{$prefix}-mr-#{nth($sizes, $index)} { margin-right: #{nth($sizes, $index)}px; }
.#{$prefix}-mb-#{nth($sizes, $index)} { margin-bottom: #{nth($sizes, $index)}px; }
.#{$prefix}-ml-#{nth($sizes, $index)} { margin-left: #{nth($sizes, $index)}px; }
}
.#{$prefix}-m-0 { margin: 0px; }
.#{$prefix}-mt-0 { margin-top: 0px; }
.#{$prefix}-mr-0 { margin-right: 0px; }
.#{$prefix}-mb-0 { margin-bottom: 0px; }
.#{$prefix}-ml-0 { margin-left: 0px; }
// 快速使用
.#{$prefix}-m { margin: 20px; }
.#{$prefix}-mt { margin-top: 20px; }
.#{$prefix}-mr { margin-right: 20px; }
.#{$prefix}-mb { margin-bottom: 20px; }
.#{$prefix}-ml { margin-left: 20px; }
.#{$prefix}-p { padding: $margin; }
.#{$prefix}-pt { padding-top: $margin; }
.#{$prefix}-pr { padding-right: $margin; }
.#{$prefix}-pb { padding-bottom: $margin; }
.#{$prefix}-pl { padding-left: $margin; }
.#{$prefix}-p-10 { padding: 10px; }
.#{$prefix}-pt-10 { padding-top: 10px; }
.#{$prefix}-pr-10 { padding-right: 10px; }
.#{$prefix}-pb-10 { padding-bottom: 10px; }
.#{$prefix}-pl-10 { padding-left: 10px; }
.#{$prefix}-p-0 { padding: 0px; }
.#{$prefix}-pt-0 { padding-top: 0px; }
.#{$prefix}-pr-0 { padding-right: 0px; }
.#{$prefix}-pb-0 { padding-bottom: 0px; }
.#{$prefix}-pl-0 { padding-left: 0px; }
.#{$prefix}-p { padding: 20px; }
.#{$prefix}-pt { padding-top: 20px; }
.#{$prefix}-pr { padding-right: 20px; }
.#{$prefix}-pb { padding-bottom: 20px; }
.#{$prefix}-pl { padding-left: 20px; }

1
src/assets/style/public.scss
View File

@@ -1,5 +1,4 @@
@import '~@/assets/style/unit/_color.scss';
@import '~@/assets/style/unit/_size.scss';
// 工具类名统一前缀
$prefix: d2;

2
src/assets/style/theme/line/setting.scss
View File

@@ -13,7 +13,7 @@ $theme-container-border-outer: 1px solid $color-border-1;
// 顶栏和侧边栏中展开的菜单 hover 状态下
$theme-menu-item-color-hover: #293849;
$theme-menu-item-background-color-hover: #ecf5ff;
$theme-menu-item-background-color-hover: #EFEFEF;
// 顶栏上的文字颜色
$theme-header-item-color: $color-text-normal;

2
src/assets/style/theme/star/setting.scss
View File

@@ -8,7 +8,7 @@ $theme-bg-image: '/static/image/bg/star-squashed.jpg';
// container组件
$theme-container-background-color: rgba(#FFF, .9);
$theme-container-header-footer-background-color: rgba(#FFF, .6);
$theme-container-border-inner: 1px solid #8fb0b1;
$theme-container-border-inner: 1px solid #cecece;
$theme-container-border-outer: none;
// 顶栏和侧边栏中展开的菜单 hover 状态下

10
src/assets/style/theme/theme.scss
View File

@@ -71,16 +71,6 @@
.el-aside {
transition: width .3s;
overflow: inherit;
// 空菜单
.d2-side-menu-empty {
background-color: rgba(#000, .03);
margin: $margin;
margin-top: 0px;
border-radius: 4px;
line-height: 100px;
text-align: center;
color: $color-text-sub;
}
// [菜单] 正常状态
.el-menu {
background-color: transparent;

1
src/assets/style/unit/_size.scss
View File

@@ -1 +0,0 @@
$margin: 20px;

4
src/components/core/d2-container/index.vue
View File

@@ -45,15 +45,11 @@ export default {
<style lang="scss">
@import '~@/assets/style/public.scss';
.container-component {
// margin-right: 20px;
// margin-bottom: 20px;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
// padding-right: $margin;
// padding-bottom: $margin;
overflow: auto;
}
@media (min-width: 576px) {

6
src/components/core/d2-markdown/index.vue
View File

@@ -19,7 +19,7 @@ export default {
required: false,
default: ''
},
md: {
source: {
type: String,
required: false,
default: ''
@@ -45,7 +45,7 @@ export default {
mounted () {
if (this.url) {
this.initWithUrl()
} else if (this.md) {
} else if (this.source) {
this.initWithMd()
} else {
console.log('not mounted init')
@@ -54,7 +54,7 @@ export default {
methods: {
// 使用 md 初始化
initWithMd () {
this.markedHTML = this.marked(this.md)
this.markedHTML = this.marked(this.source)
},
// 使用 url 初始化
async initWithUrl () {

32
src/components/demo/d2-demo-link-btn/index.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<el-button-group>
<el-button v-if="title" size="mini">{{title}}</el-button>
<el-button size="mini" @click="$open(link)">
<d2-icon :name="icon"/>
{{link}}
</el-button>
</el-button-group>
</template>
<script>
export default {
name: 'd2-demo-link-btn',
props: {
title: {
type: String,
required: false,
default: ''
},
icon: {
type: String,
required: false,
default: 'link'
},
link: {
type: String,
required: false,
default: 'https://github.com/FairyEver'
}
}
}
</script>

1
src/components/demo/register.js
View File

@@ -1,4 +1,5 @@
import Vue from 'vue'
Vue.component('d2-demo-link-btn', () => import('@/components/demo/d2-demo-link-btn'))
Vue.component('d2-demo-page-header', () => import('@/components/demo/d2-demo-page-header'))
Vue.component('d2-demo-page-cover', () => import('@/components/demo/d2-demo-page-cover'))

9
src/main.js
View File

@@ -33,18 +33,21 @@ import '@/mock/register'
// vuex
import store from '@/store/index.js'
// 插件 log简化
import pluginLog from '@/plugin/log'
// 插件 导出文件
import pluginImport from '@/plugin/import'
// 插件 导出文件
import pluginExport from '@/plugin/export'
// 插件 log简化
import pluginLog from '@/plugin/log'
// 插件 打开页面
import pluginOpen from '@/plugin/open'
Vue.use(ElementUI)
Vue.use(pluginLog)
Vue.use(pluginImport)
Vue.use(pluginExport)
Vue.use(pluginLog)
Vue.use(pluginOpen)
Vue.config.productionTip = false

15
src/menu/index.js
View File

@@ -40,8 +40,8 @@ const demoPlugins = {
},
{ path: `${pre}build`, title: '环境区分' },
{ path: `${pre}clipboard-polyfill`, title: '剪贴板访问' },
{ path: `${pre}js-cookie`, title: 'Cookie 读写' },
{ path: `${pre}timeago`, title: '时间差计算' }
{ path: `${pre}day`, title: '日期计算' },
{ path: `${pre}js-cookie`, title: 'Cookie 读写' }
])('/demo/plugins/')
}
@@ -79,11 +79,18 @@ const demoComponents = {
{ path: `${pre}icon/svg`, title: 'SVG图标组件' }
]
},
{
path: `${pre}markdown`,
title: 'markdown 解析',
children: [
{ path: `${pre}markdown/source`, title: '指定资源' },
{ path: `${pre}markdown/url`, title: '异步加载文件' }
]
},
{ path: `${pre}countup`, title: '数字动画' },
{ path: `${pre}editor-quill`, title: '富文本编辑器' },
{ path: `${pre}editor-simpleMDE`, title: 'markdown编辑器' },
{ path: `${pre}highlight`, title: '代码高亮显示' },
{ path: `${pre}markdown`, title: 'markdown解析' }
{ path: `${pre}highlight`, title: '代码高亮显示' }
])('/demo/components/')
}

2
src/pages/core/login/style.scss
View File

@@ -61,6 +61,6 @@
// 帮助按钮
.button-help {
width: 300px;
margin-top: $margin;
margin-top: 20px;
}
}

4
src/pages/demo/business/user-center/home/index.vue
View File

@@ -1,8 +1,6 @@
<template>
<d2-container type="full">
<template slot="header">
用户中心
</template>
<template slot="header">用户中心</template>
doing...
</d2-container>
</template>

2
src/pages/demo/components/container/card.vue
View File

@@ -1,7 +1,7 @@
<template>
<d2-container>
<template slot="header">我是插入到 header 中的内容</template>
<d2-markdown :md="doc"/>
<d2-markdown :source="doc"/>
</d2-container>
</template>

2
src/pages/demo/components/container/full.vue
View File

@@ -3,7 +3,7 @@
<template slot="header">
我是插入到 header 中的内容
</template>
<d2-markdown :md="doc"/>
<d2-markdown :source="doc"/>
<template slot="footer">
我是插入到 footer 中的内容
</template>

2
src/pages/demo/components/container/ghost.vue
View File

@@ -1,7 +1,7 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" style="width: 50%;">
<d2-markdown :md="doc"/>
<d2-markdown :source="doc"/>
</el-card>
</d2-container>
</template>

4
src/pages/demo/components/icon/select.vue
View File

@@ -40,8 +40,8 @@ export default {
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.title-group {
margin-top: $margin;
margin-bottom: $margin / 2;
margin-top: 20px;
margin-bottom: 10px;
&:first-child {
margin-top: 0px;
}

3
src/pages/demo/components/layout/grid.vue
View File

@@ -94,9 +94,6 @@ export default {
.el-card {
height: 100%;
@extend %unable-select;
// .el-card__header {
// padding: 8px $margin;
// }
}
.vue-resizable-handle {
opacity: .3;

2
src/pages/demo/components/layout/splitpane.vue
View File

@@ -1,6 +1,6 @@
<template>
<d2-container>
<template slot="header">基本示例</template>
<template slot="header">区域划分</template>
<div style="height: 400px; margin: -16px;">
<SplitPane :min-percent='20' :default-percent='30' split="vertical">
<template slot="paneL"><div style="margin: 10px;">左</div></template>

4
src/pages/demo/components/markdown/index.vue → src/pages/demo/components/markdown/source.vue
View File

@@ -1,7 +1,7 @@
<template>
<d2-container>
<template slot="header">效果演示</template>
<d2-markdown :md="doc"/>
<template slot="header">指定资源</template>
<d2-markdown :source="doc"/>
</d2-container>
</template>

6
src/pages/demo/components/markdown/url.vue Normal file
View File

@@ -0,0 +1,6 @@
<template>
<d2-container>
<template slot="header">异步加载文件</template>
<d2-markdown url="/static/md/demo.md"/>
</d2-container>
</template>

78
src/pages/demo/plugins/day/index.vue Normal file
View File

@@ -0,0 +1,78 @@
<template>
<d2-container type="full">
<template slot="header">
<el-button @click="handleReset">重新设置基础时间 this.now = dayjs()</el-button>
</template>
<h1 class="d2-mt-0">当前时间</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`now.format('YYYY年M月D日 HH:mm:ss')`"/>{{now.format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
</el-row>
<h1>获取</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取年\nnow.year()`"/>{{now.year()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取月\nnow.month()`"/>{{now.month()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取日\nnow.date()`"/>{{now.date()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//获取星期\nnow.day()`"/>{{now.day()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取小时\nnow.hour()`"/>{{now.hour()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取分钟\nnow.minute()`"/>{{now.minute()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取秒\nnow.second()`"/>{{now.second()}}</el-card></el-col>
<el-col :span="6"><el-card shadow="never"><d2-highlight slot="header" :code="`//获取毫秒\nnow.millisecond()`"/>{{now.millisecond()}}</el-card></el-col>
</el-row>
<h1>设置</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置月份\nnow.set('month', 6).month()`"/>{{now.set('month', 6).month()}}</el-card></el-col>
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置秒\nnow.set('second', 30).second()`"/>{{now.set('second', 30).second()}}</el-card></el-col>
<el-col :span="8"><el-card shadow="never"><d2-highlight slot="header" :code="`//设置小时\nnow.set('hour', 4).hour()`"/>{{now.set('hour', 4).hour()}}</el-card></el-col>
</el-row>
<h1>操作</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//增加\nnow.add(1, 'day').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.add(1, 'day').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//减少\nnow.subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.subtract(7, 'year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//开头时间\nnow.startOf('year').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.startOf('year').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//末尾时间\nnow.endOf('month').format('YYYY年M月D日 HH:mm:ss')`"/>{{now.endOf('month').format('YYYY年M月D日 HH:mm:ss')}}</el-card></el-col>
</el-row>
<h1>显示</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//格式化\nnow.format('YYYY-M-D HH:mm:ss')`"/>{{now.format('YYYY-M-D HH:mm:ss')}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//时间差\nnow.diff(now.subtract(1, 'day'), 'days')`"/>{{now.diff(now.subtract(1, 'day'), 'days')}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Unix 时间戳 (毫秒)\nnow.valueOf()`"/>{{now.valueOf()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Unix 时间戳 (秒)\nnow.unix()`"/>{{now.unix()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//天数 (月)\nnow.daysInMonth()`"/>{{now.daysInMonth()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//Date 对象\nnow.toDate()`"/>{{now.toDate()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//数组\nnow.toArray()`"/>{{now.toArray()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//序列化 Dayjs 对象时会返回 ISO 8601 格式的字符串\nnow.toJSON()`"/>{{now.toJSON()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//ISO 8601 字符串\nnow.toISOString()`"/>{{now.toISOString()}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//字符串\nnow.toString()`"/>{{now.toString()}}</el-card></el-col>
<el-col :span="24"><el-card shadow="never"><d2-highlight slot="header" :code="`//对象\nnow.toObject()`"/>{{now.toObject()}}</el-card></el-col>
</el-row>
<h1>查询</h1>
<el-row :gutter="20" class="d2-mt">
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否之前\nnow.isBefore(now.add(1, 'day'))`"/>{{now.isBefore(now.add(1, 'day'))}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否之前\nnow.isBefore(now.subtract(1, 'day'))`"/>{{now.isBefore(now.subtract(1, 'day'))}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否相同\nnow.isSame(now)`"/>{{now.isSame(now)}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never" class="d2-mb"><d2-highlight slot="header" :code="`//是否相同\nnow.isSame(now.add(1, 'day'))`"/>{{now.isSame(now.add(1, 'day'))}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//是否之后\nnow.isAfter(now.add(1, 'day'))`"/>{{now.isAfter(now.add(1, 'day'))}}</el-card></el-col>
<el-col :span="12"><el-card shadow="never"><d2-highlight slot="header" :code="`//是否之后\nnow.isAfter(now.subtract(1, 'day'))`"/>{{now.isAfter(now.subtract(1, 'day'))}}</el-card></el-col>
</el-row>
<template slot="footer">
<d2-demo-link-btn title="依赖" :link="link"/>
</template>
</d2-container>
</template>
<script>
import dayjs from 'dayjs'
export default {
data () {
return {
link: 'https://github.com/iamkun/dayjs',
now: dayjs()
}
},
methods: {
handleReset () {
this.now = dayjs()
}
}
}
</script>

2
src/pages/demo/plugins/mock/components/d2-demo-mock-card.vue
View File

@@ -47,7 +47,7 @@ export default {
<style lang="scss" scoped>
@import '~@/assets/style/public.scss';
.col {
padding: $margin;
padding: 20px;
border-radius: 4px;
border-width: 1px;
border-style: solid;

2
src/pages/demo/plugins/mock/dpd.vue
View File

@@ -2,7 +2,7 @@
<d2-container type="ghost">
<el-card shadow="never" class="d2-mb">
<d2-demo-page-header slot="header" title="数据占位符"/>
<d2-markdown :md="doc"/>
<d2-markdown :source="doc"/>
</el-card>
<d2-demo-mock-card
v-for="(item, index) in settingDPD"

2
src/pages/demo/plugins/mock/dtd.vue
View File

@@ -2,7 +2,7 @@
<d2-container type="ghost">
<el-card shadow="never" class="d2-mb">
<d2-demo-page-header slot="header" title="数据模板"/>
<d2-markdown :md="doc"/>
<d2-markdown :source="doc"/>
</el-card>
<d2-demo-mock-card
v-for="(item, index) in settingDTD"

70
src/pages/demo/plugins/timeago/index.vue
View File

@@ -1,70 +0,0 @@
<template>
<d2-container type="ghost">
<el-card shadow="never" class="d2-mb">
<div class="d2-text-center">
<h1 style="font-size: 30px;">您在{{openPageDateAgo}}打开的此页面</h1>
<p style="font-size: 10px;">请稍等一下 10秒后会开始自动刷新</p>
</div>
</el-card>
<el-card shadow="never">
<div class="d2-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>
</d2-container>
</template>
<script>
import timeago from 'timeago.js'
export default {
data () {
return {
// 打开页面时间
openPageDate: new Date(),
// 打开页面已经过去的时间
openPageDateAgo: '',
// 打开页面时间计时器
dateTimeRangeTimer: null,
// 起止时间
dateTimeRange: [new Date(2018, 0, 1, 0, 0), new Date()],
// 上面起止时间的计算结果
dateTimeRangeAgo: ''
}
},
mounted () {
// 刷新打开页面过去的时间
this.refreshOpenPageDateAgo()
this.dateTimeRangeTimer = setInterval(this.refreshOpenPageDateAgo, 1000)
// 刷新起止时间的计算结果
this.refreshDateTimeRangeAgo()
},
beforeDestroy () {
// 清空计时器
clearInterval(this.dateTimeRangeTimer)
},
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>

8
src/plugin/open/index.js Normal file
View File

@@ -0,0 +1,8 @@
export default {
install (Vue, options) {
// 打开一个url
Vue.prototype.$open = (url = 'https://github.com/FairyEver') => {
window.open(url)
}
}
}

7
src/router/index.js
View File

@@ -40,7 +40,8 @@ const routes = [
{ path: 'index', name: `${pre}index`, component: () => import('@/pages/demo/components/index/index.vue') },
{ path: 'layout/grid', name: `${pre}layout-grid`, component: () => import('@/pages/demo/components/layout/grid.vue') },
{ path: 'layout/splitpane', name: `${pre}layout-splitpane`, component: () => import('@/pages/demo/components/layout/splitpane.vue') },
{ path: 'markdown', name: `${pre}markdown`, component: () => import('@/pages/demo/components/markdown/index.vue') }
{ path: 'markdown/source', name: `${pre}markdown-source`, component: () => import('@/pages/demo/components/markdown/source.vue') },
{ path: 'markdown/url', name: `${pre}markdown-url`, component: () => import('@/pages/demo/components/markdown/url.vue') }
])('demo-components-')
},
{
@@ -52,6 +53,7 @@ const routes = [
children: (pre => [
{ path: 'build', name: `${pre}build`, component: () => import('@/pages/demo/plugins/build/index.vue') },
{ path: 'clipboard-polyfill', name: `${pre}clipboard-polyfill`, component: () => import('@/pages/demo/plugins/clipboard-polyfill/index.vue') },
{ path: 'day', name: `${pre}day`, component: () => import('@/pages/demo/plugins/day/index.vue') },
{ path: 'export/table', name: `${pre}export-table`, component: () => import('@/pages/demo/plugins/export/table.vue') },
{ path: 'export/txt', name: `${pre}export-txt`, component: () => import('@/pages/demo/plugins/export/txt.vue') },
{ path: 'i18n/demo1', name: `${pre}i18n-demo1`, component: () => import('@/pages/demo/plugins/i18n/demo1.vue') },
@@ -62,8 +64,7 @@ const routes = [
{ path: 'js-cookie', name: `${pre}js-cookie`, component: () => import('@/pages/demo/plugins/js-cookie/index.vue') },
{ path: 'mock/ajax', name: `${pre}mock-ajax`, component: () => import('@/pages/demo/plugins/mock/ajax.vue') },
{ path: 'mock/dpd', name: `${pre}mock-dpd`, component: () => import('@/pages/demo/plugins/mock/dpd.vue') },
{ path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue') },
{ path: 'timeago', name: `${pre}timeago`, component: () => import('@/pages/demo/plugins/timeago/index.vue') }
{ path: 'mock/dtd', name: `${pre}mock-dtd`, component: () => import('@/pages/demo/plugins/mock/dtd.vue') }
])('demo-plugins-')
},
{

23
static/md/demo.md Normal file
View File

@@ -0,0 +1,23 @@
# 一级标题
| ID | Name | Email |
| --- | --- | --- |
| 0001 | FairyEver | 1711467488@qq.com |
```
alert('Hello World')
```
一般引用
> 引用文字
分享一个我很早前的一副设计作品 [in Lofter](http://fairyever.lofter.com/post/16ff00_6796fe8) 借此演示百度云链接的显示优化
> https://pan.baidu.com/s/1kW6uUwB
设计源文件
> 链接: https://pan.baidu.com/s/1ggFW21l 密码: 877y
[https://github.com/FairyEver](https://github.com/FairyEver)