MessageList.vue
1.24 KB
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
<template>
<v-card>
<v-toolbar card dense color="transparent">
<v-toolbar-title><h4>Message</h4></v-toolbar-title>
</v-toolbar>
<v-divider></v-divider>
<v-card-text class="pa-0">
<v-list two-line class="pa-0">
<template v-for="(item, index) in items">
<v-subheader v-if="item.header" :key="item.header">{{ item.header }}</v-subheader>
<v-divider v-else-if="item.divider" :key="index"></v-divider>
<v-list-tile avatar v-else :key="item.title" @click="handleClick">
<v-list-tile-avatar >
<img :src="item.avatar">
</v-list-tile-avatar>
<v-list-tile-content>
<v-list-tile-title v-html="item.title"></v-list-tile-title>
<v-list-tile-sub-title v-html="item.subtitle"></v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
</template>
</v-list>
<v-divider></v-divider>
<v-btn block flat class="ma-0">All</v-btn>
<v-divider></v-divider>
</v-card-text>
</v-card>
</template>
<script>
import messages from '@/api/message';
export default {
data: () => ({
items: messages
}),
methods: {
handleClick: (e) => {
console.log(e);
}
},
};
</script>