blog的后端代码
view | history | commit | commitdiff
inleft
2022-03-01 88f419df77ade235ea5e5e24be204842a24b7b33
commit | author | age
9bcb19 1 <template>
I 2   <a-list
3     size="large"
4     rowKey="id"
5     :loading="loading"
6     itemLayout="vertical"
7     :dataSource="data"
8   >
9     <a-list-item :key="item.id" slot="renderItem" slot-scope="item">
10       <a-list-item-meta>
11         <a slot="title" href="https://vue.ant.design/">{{ item.title }}</a>
12         <template slot="description">
13           <span>
14             <a-tag>Ant Design</a-tag>
15             <a-tag>设计语言</a-tag>
16             <a-tag>蚂蚁金服</a-tag>
17           </span>
18         </template>
19       </a-list-item-meta>
20       <article-list-content :description="item.description" :owner="item.owner" :avatar="item.avatar" :href="item.href" :updateAt="item.updatedAt" />
21     </a-list-item>
22     <div slot="footer" v-if="data.length > 0" style="text-align: center; margin-top: 16px;">
23       <a-button @click="loadMore" :loading="loadingMore">加载更多</a-button>
24     </div>
25   </a-list>
26 </template>
27
28 <script>
29 import { ArticleListContent } from '@/components'
30
31 export default {
32   name: 'Article',
33   components: {
34     ArticleListContent
35   },
36   data () {
37     return {
38       loading: true,
39       loadingMore: false,
40       data: []
41     }
42   },
43   mounted () {
44     this.getList()
45   },
46   methods: {
47     getList () {
48       this.data = [
49         {
50           updatedAt: '2021-05-01 12:00:00',
51           title: '小诺',
52           owner: '俞宝山',
53           description: 'snowy是小诺团队产品',
54           href: 'https://xiaonuo.vip',
55           avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ZiESqWwCXBRQoaPONSJe.png',
56           name: '曲丽丽',
57           id: 'member1'
58         },
59         {
60           updatedAt: '2021-05-01 12:00:00',
61           title: '小诺',
62           owner: '徐玉祥',
63           description: 'snowy是小诺团队产品',
64           href: 'https://xiaonuo.vip',
65           avatar: 'https://gw.alipayobjects.com/zos/rmsportal/tBOxZPlITHqwlGjsJWaF.png',
66           name: '王昭君',
67           id: 'member2'
68         },
69         {
70           updatedAt: '2021-05-01 12:00:00',
71           title: '小诺',
72           owner: '董夏雨',
73           description: 'snowy是小诺团队产品',
74           href: 'https://xiaonuo.vip',
75           avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sBxjgqiuHMGRkIjqlQCd.png',
76           name: '董娜娜',
77           id: 'member3'
78         }
79       ]
80       this.loading = false
81     },
82     loadMore () {
83       this.loadingMore = false
84     }
85   }
86 }
87 </script>
88
89 <style scoped>
90
91 </style>