Merge pull request #120 from glsnb/master

Add List + Page template

Author: zhengxkq

website/config/index.js

@@ -290,6 +290,10 @@ export default {
                     label: 'Combined-Forms',
                     name: '/examples/combined-forms'
                 },
+                {
+                    label: 'Message-List',
+                    name: '/examples/message-list'
+                }
 
             ]
         },

website/page/examples/message-list/index.js

@@ -0,0 +1,3 @@
+import index from './index.vue';
+
+export default index;

website/page/examples/message-list/index.vue

@@ -0,0 +1,73 @@
+<template>
+    <div class="fg-message-list-demo">
+        <List
+            item-layout="vertical"
+        >
+            <ListItem v-for="item in data.list" :key="item.title">
+                <ListItemMeta :avatar="item.avatar" :title="item.title" :description="item.description" />
+                {{ item.content }}
+            </ListItem>
+        </List>
+        <Page
+            class="fg-message-list-demo-page"
+            v-if="showPage"
+            :show-total="showPageTotal"
+            :current="data.page"
+            :total="data.total"
+            :page-size="data.pageSize"
+        />
+    </div>
+</template>
+
+<script>
+
+export default {
+    data() {
+        return {
+            showPage: true,
+            showPageTotal: true,
+            data: {
+                total: 5,
+                page: 1,
+                pageSize: 5,
+                list: [
+                    {
+                        title: 'This is title 1',
+                        description: 'This is description, this is description, this is description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is title 2',
+                        description: 'This is description, this is description, this is description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is title 3',
+                        description: 'This is description, this is description, this is description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is title 4',
+                        description: 'This is description, this is description, this is description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    },
+                    {
+                        title: 'This is title 5',
+                        description: 'This is description, this is description, this is description.',
+                        avatar: 'https://dev-file.iviewui.com/userinfoPDvn9gKWYihR24SpgC319vXY8qniCqj4/avatar'
+                    }
+                ]
+            }
+        };
+    }
+};
+</script>
+
+<style lang="less">
+.fg-message-list-demo {
+    padding: 20px;
+    &-page {
+        float: right;
+    }
+}
+</style>

website/router/routers.js

@@ -73,6 +73,7 @@ const twoRelatedForm = () => import(/* webpackChunkName: "twoRelatedForm" */ '..
 const auditExample = () => import(/* webpackChunkName: "auditExample" */ '../page/examples/audit/detail');
 const dynamicForm = () => import(/* webpackChunkName: "dynamicForm" */ '../page/examples/dynamic-form');
 const combinedForms = () => import(/* webpackChunkName: "combinedForms" */ '../page/examples/combined-forms');
+const messageList = () => import(/* webpackChunkName: "messageList" */ '../page/examples/message-list');
 
 export default [
     {
@@ -420,6 +421,11 @@ export default [
                 path: '/examples/combined-forms',
                 name: 'combined-forms',
                 component: combinedForms
+            },
+            {
+                path: '/examples/message-list',
+                name: 'message-list',
+                component: messageList
             }
         ]
     }