96 lines
2.1 KiB
Vue
96 lines
2.1 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 v-if="article.updatedAt" 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;
|
|||
|
|
gap: 20px;
|
|||
|
|
&: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;
|
|||
|
|
// 关键字
|
|||
|
|
:deep(em) {
|
|||
|
|
font-style: normal;
|
|||
|
|
color: var(--color-keyword);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 日期
|
|||
|
|
.date {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
color: var(--color-gray);
|
|||
|
|
font-size: var(--font-size-small);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|