96 lines
2.0 KiB
Vue
96 lines
2.0 KiB
Vue
<template>
|
||
<ul v-if="articles.length > 0" class="article-list">
|
||
<li v-for="article in articles" :key="article.uid">
|
||
<nuxt-link :to="`/article/${article.uid}`" target="_blank">
|
||
<span class="title" v-html="getTitle(article)"></span>
|
||
<span class="date">{{ article.updatedAt }}</span>
|
||
</nuxt-link>
|
||
</li>
|
||
</ul>
|
||
<EmptyTip v-else/>
|
||
</template>
|
||
|
||
<script>
|
||
import EmptyTip from '@/components/common/EmptyTip'
|
||
|
||
export default {
|
||
name: 'ArticleList',
|
||
components: { EmptyTip },
|
||
props: {
|
||
// 文章列表
|
||
articles: {
|
||
type: Array,
|
||
required: true
|
||
},
|
||
// 关键字
|
||
keyword: {
|
||
type: String
|
||
}
|
||
},
|
||
methods: {
|
||
// 获取标题
|
||
getTitle (article) {
|
||
// 存在关键字时，为关键字添加em标签
|
||
if (this.keyword != null && this.keyword.trim().length > 0) {
|
||
return article.title.replace(new RegExp(this.keyword, 'g'), `<em>${this.keyword}</em>`)
|
||
}
|
||
return article.title
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
ul.article-list {
|
||
padding: 10px 0 15px;
|
||
li {
|
||
border-bottom: 1px dashed var(--color-gray-light);
|
||
&:last-of-type {
|
||
border-bottom: 0;
|
||
}
|
||
}
|
||
li a {
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 15px 10px 15px 25px;
|
||
color: var(--font-color);
|
||
text-decoration: none;
|
||
&:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
// 前方灰点
|
||
&::before {
|
||
content: '';
|
||
width: 5px;
|
||
height: 5px;
|
||
background-color: var(--color-gray);
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 10px;
|
||
transform: translateY(-50%);
|
||
}
|
||
// 标题
|
||
.title {
|
||
flex-grow: 1;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
padding-right: 20px;
|
||
// 关键字
|
||
:deep(em) {
|
||
font-style: normal;
|
||
color: var(--color-keyword);
|
||
}
|
||
}
|
||
// 日期
|
||
.date {
|
||
flex-shrink: 0;
|
||
color: var(--color-gray);
|
||
font-size: var(--font-size-small);
|
||
}
|
||
}
|
||
}
|
||
</style>
|