This repository has been archived by the owner on Jan 26, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
PageInfo.vue
138 lines (135 loc) · 3.69 KB
/
PageInfo.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<template>
<div>
<i
class="iconfont reco-account authors"
v-if="pageInfo.frontmatter.authors">
<span
v-for="(author, index) in pageInfo.frontmatter.authors"
:key="index"
class="author-item"
@click="goToAuthor(author)">{{ withComma(index, 'authors') }}</span>
</i>
<i
v-if="pageInfo.frontmatter.date"
class="iconfont reco-date">
<span>{{ pageInfo.frontmatter.date | formatDateValue }}</span>
</i>
<i
v-if="showAccessNumber === true"
class="iconfont reco-eye">
<AccessNumber
:idVal="pageInfo.path"
:numStyle="numStyle" />
</i>
<i
v-if="pageInfo.frontmatter.tags"
class="iconfont reco-tag tags">
<span
v-for="(tag, subIndex) in pageInfo.frontmatter.tags"
:key="subIndex"
class="tag-item"
:class="{ 'active': currentTag == tag }"
@click="goToTags(tag)">{{ withComma(subIndex, 'tags') }}</span>
</i>
</div>
</template>
<script>
// 引入时间格式化js文件
import { formatDate } from '@theme/helpers/utils'
export default {
props: {
pageInfo: {
type: Object,
default () {
return {}
}
},
currentTag: {
type: String,
default: ''
},
showAccessNumber: {
type: Boolean,
default: false
}
},
data () {
return {
numStyle: {
fontSize: '.9rem',
fontWeight: 'normal',
color: '#999'
}
}
},
filters: {
formatDateValue (value) {
if (!value) return ''
// 返回的value的值都是这个样子2019-09-20T18:22:30.000Z
// 对value进行处理
value = value.replace('T', ' ').slice(0, value.lastIndexOf('.'))
// 转化后的value 2019-09-20 18:22:30
// 获取到时分秒
const h = Number(value.substr(11, 2))
const m = Number(value.substr(14, 2))
const s = Number(value.substr(17, 2))
// 判断时分秒是不是 00:00:00 (如果是用户手动输入的00:00:00也会不显示)
if (h > 0 || m > 0 || s > 0) {
// 时分秒有一个> 0 就说明用户输入一个非 00:00:00 的时分秒
return formatDate(value)
} else {
// 用户没有输入或者输入了 00:00:00
return formatDate(value, 'yyyy-MM-dd')
}
}
},
methods: {
goToTags (tag) {
if (this.$route.path !== `/tag/${tag}/`) {
this.$router.push({ path: `/tag/${tag}/` })
}
},
goToAuthor (author) {
if (Array.isArray(author) && author.length > 1) return window.open(author[1]);
window.open(`https://github.com/${this.getName(author)}`);
},
withComma (index, type) {
const names = this.pageInfo.frontmatter[type];
if(index !== names.length-1) return `${this.getName(names[index])},`;
else return this.getName(names[index]);
},
getName(arr) {
return Array.isArray(arr) && arr.length ? arr[0] : arr
}
}
}
</script>
<style lang="stylus" scoped>
.iconfont
display inline-block
line-height 1.5rem
&:not(:last-child)
margin-right 1rem
span
margin-left 0.5rem
.tags
.tag-item
cursor pointer
font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
&.active
color $accentColor
&:hover
color $accentColor
.authors
.author-item
cursor pointer
font-family Ubuntu, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
&.active
color $accentColor
&:hover
color $accentColor
@media (max-width: $MQMobile)
.tags
display block
margin-left 0 !important
</style>