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
| <template>
| <van-cell
| class="article-item"
| @click="$router.push(`/detail/${item.id}`)"
| >
| <template #title>
| <div class="head">
| <img
| :src="item.avatar"
| alt=""
| />
| <div class="con">
| <p class="title van-ellipsis">{{item.stem}}</p>
| <p class="other">{{item.creator}} | {{item.createdAt}}</p>
| </div>
| </div>
| </template>
| <template #label>
| <div class="body van-multi-ellipsis--l2">
| {{clearHtmlTag(item.content)}}
| </div>
| <div class="foot">点赞 {{item.likeCount}} | 浏览 {{item.views}}</div>
| </template>
| </van-cell>
| </template>
|
| <script>
|
| export default {
| props: {
| item: {
| type: Object,
| required: true,
| default: () => {
| return {}
| }
| }
| },
| methods: {
| // 处理数据
| clearHtmlTag (str) {
| return str.replace(/<[^>]+>/g, '')
| }
| }
| }
| </script>
|
| <style lang='less' scoped>
| .article-item {
| .head {
| display: flex;
| img {
| width: 40px;
| height: 40px;
| border-radius: 50%;
| overflow: hidden;
| }
| .con {
| flex: 1;
| overflow: hidden;
| padding-left: 10px;
| p {
| margin: 0;
| line-height: 1.5;
| &.title {
| width: 280px;
| }
| &.other {
| font-size: 10px;
| color: #999;
| }
| }
| }
| }
| .body {
| font-size: 14px;
| color: #666;
| line-height: 1.6;
| margin-top: 10px;
| }
| .foot {
| font-size: 12px;
| color: #999;
| margin-top: 10px;
| }
| }
| </style>
|
|
