add a nav for test page

test/app.vue

@@ -2,8 +2,41 @@
     @import "../src/styles/index.less";
     @import "../src/styles/package.less";
 </style>
+<style scoped>
+nav {
+    margin-bottom: 40px;
+}
+
+li {
+    display: inline-block;
+}
+
+li + li {
+    border-left: solid 1px #bbb;
+    padding-left: 5px;
+    margin-left: 5px;
+}
+
+.v-link-active {
+    color: #bbb;
+}
+</style>
 <template>
     <div>
+        <nav>
+            <ul>
+                <li><a v-link="'/button'">Button</a></li>
+                <li><a v-link="'/card'">Card</a></li>
+                <li><a v-link="'/message'">Message</a></li>
+                <li><a v-link="'/more'">More</a></li>
+                <li><a v-link="'/page'">Page</a></li>
+                <li><a v-link="'/poptip'">Poptip</a></li>
+                <li><a v-link="'/radio'">Radio</a></li>
+                <li><a v-link="'/select'">Select</a></li>
+                <li><a v-link="'/slider'">Slider</a></li>
+                <li><a v-link="'/step'">Step</a></li>
+            </ul>
+        </nav>
         <router-view></router-view>
     </div>
 </template>

test/main.js

@@ -16,19 +16,19 @@ var router = new VueRouter({
 });
 
 router.map({
-    '/index': {
-        component: function (resolve) {
-            require(['./routers/index.vue'], resolve);
-        }
-    },
     '/button': {
         component: function (resolve) {
             require(['./routers/button.vue'], resolve);
         }
     },
-    '/page': {
+    '/card': {
         component: function (resolve) {
-            require(['./routers/page.vue'], resolve);
+            require(['./routers/card.vue'], resolve);
+        }
+    },
+    '/message': {
+        component: function (resolve) {
+            require(['./routers/message.vue'], resolve);
         }
     },
     '/more': {
@@ -36,9 +36,14 @@ router.map({
             require(['./routers/more.vue'], resolve);
         }
     },
-    '/layout': {
+    '/page': {
         component: function (resolve) {
-            require(['./routers/layout.vue'], resolve);
+            require(['./routers/page.vue'], resolve);
+        }
+    },
+    '/poptip': {
+        component: function (resolve) {
+            require(['./routers/poptip.vue'], resolve);
         }
     },
     '/radio': {
@@ -46,25 +51,20 @@ router.map({
             require(['./routers/radio.vue'], resolve);
         }
     },
-    '/msg': {
-        component: function (resolve) {
-            require(['./routers/msg.vue'], resolve);
-        }
-    },
-    '/notice': {
-        component: function (resolve) {
-            require(['./routers/notice.vue'], resolve);
-        }
-    },
-    '/tag': {
-        component: function (resolve) {
-            require(['./routers/tag.vue'], resolve);
-        }
-    },
     '/select': {
         component: function (resolve) {
             require(['./routers/select.vue'], resolve);
         }
+    },
+    '/slider': {
+        component: function (resolve) {
+            require(['./routers/slider.vue'], resolve);
+        }
+    },
+    '/step': {
+        component: function (resolve) {
+            require(['./routers/step.vue'], resolve);
+        }
     }
 });
 
@@ -77,6 +77,6 @@ router.afterEach(function (transition) {
 });
 
 router.redirect({
-    '*': "/index"
+    '*': "/button"
 });
 router.start(App, '#app');

test/routers/index.vue

@@ -1,58 +0,0 @@
-<style>
-
-</style>
-<template>
-    <Page :total="40" size="small"></Page>
-    <Page :total="40" size="small" show-elevator show-sizer></Page>
-    <Page :total="40" size="small" show-total></Page>
-</template>
-<script>
-    import { Modal, Button, Message, Page } from 'iview';
-
-    export default {
-        components: { Modal, Button, Page },
-        props: {
-        
-        },
-        data () {
-            return {
-
-            }        
-        },
-        methods: {
-            info () {
-                Modal.info({
-                    title: '这是对话框标题',
-                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
-                });
-            },
-            success () {
-                Modal.success();
-            },
-            warning () {
-                Modal.warning();
-            },
-            error () {
-                Modal.error();
-            },
-            confirm () {
-                Modal.confirm({
-//                    okText: 'OK',
-//                    cancelText: 'Cancel',
-                    title: '删除提示',
-                    content: '删除后将不可找回，您确定要删除吗？',
-                    onCancel () {
-                        Message.info('cancel it');
-                    },
-                    onOk () {
-                        setTimeout(() => {
-                            Modal.remove();
-                            Message.success('OK!');
-                        }, 2000);
-                    },
-                    loading: true
-                });
-            }
-        }
-    }
-</script>

test/routers/page.vue

@@ -2,95 +2,56 @@
 
 </style>
 <template>
-    <Steps :current="1" size="small">
+    <Page :total="40" size="small"></Page>
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+    <Page :total="40" size="small" show-elevator show-sizer></Page>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+    <Page :total="40" size="small" show-total></Page>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br>
-    <Steps :current="2">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" size="small">
-        <Step title="已完成"></Step>
-        <Step title="进行中"></Step>
-        <Step title="待进行"></Step>
-        <Step title="待进行"></Step>
-    </Steps>
-    <br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <Steps :current="1" direction="vertical">
-        <Step title="注册" icon="person-add"></Step>
-        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="验证邮箱" icon="email"></Step>
-    </Steps>
-    <br>
-    <p>当前正在进行第 {{ current + 1 }} 步</p>
-    <Steps :current="current">
-        <Step title="步骤1"></Step>
-        <Step title="步骤2"></Step>
-        <Step title="步骤3"></Step>
-        <Step title="步骤4"></Step>
-    </Steps>
-    <i-button type="primary" @click="next">下一步</i-button>
-    <br><br>
-    <Steps :current="1" direction="vertical" size="small">
-        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
-    <br><br>
-    <Steps :current="1" status="error">
-        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
-        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
-    </Steps>
 </template>
 <script>
-    import { Page, Steps, Button } from 'iview';
+    import { Modal, Button, Message, Page } from 'iview';
-
-    const Step = Steps.Step;
 
     export default {
-        components: {
+        components: { Modal, Button, Page },
-            Page,
-            Steps,
-            Step,
-            iButton: Button
-        },
         props: {
-
+        
         },
         data () {
             return {
-                total: 512,
-                current: 0
-            }
-        },
-        computed: {
 
+            }        
         },
         methods: {
-            setPage (page) {
+            info () {
-                console.log(page)
+                Modal.info({
+                    title: '这是对话框标题',
+                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
+                });
             },
-            next () {
+            success () {
-                if (this.current == 3) {
+                Modal.success();
-                    this.current = 0;
+            },
-                } else {
+            warning () {
-                    this.current += 1;
+                Modal.warning();
-                }
+            },
+            error () {
+                Modal.error();
+            },
+            confirm () {
+                Modal.confirm({
+//                    okText: 'OK',
+//                    cancelText: 'Cancel',
+                    title: '删除提示',
+                    content: '删除后将不可找回，您确定要删除吗？',
+                    onCancel () {
+                        Message.info('cancel it');
+                    },
+                    onOk () {
+                        setTimeout(() => {
+                            Modal.remove();
+                            Message.success('OK!');
+                        }, 2000);
+                    },
+                    loading: true
+                });
             }
         }
     }

test/routers/step.vue

@@ -0,0 +1,97 @@
+<style>
+
+</style>
+<template>
+    <Steps :current="1" size="small">
+        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+    <br>
+    <Steps :current="2">
+        <Step title="已完成"></Step>
+        <Step title="进行中"></Step>
+        <Step title="待进行"></Step>
+        <Step title="待进行"></Step>
+    </Steps>
+    <br>
+    <Steps :current="1" size="small">
+        <Step title="已完成"></Step>
+        <Step title="进行中"></Step>
+        <Step title="待进行"></Step>
+        <Step title="待进行"></Step>
+    </Steps>
+    <br>
+    <Steps :current="1" direction="vertical" size="small">
+        <Step title="注册" icon="person-add"></Step>
+        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="验证邮箱" icon="email"></Step>
+    </Steps>
+    <Steps :current="1" direction="vertical">
+        <Step title="注册" icon="person-add"></Step>
+        <Step title="上传头像" icon="camera" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="验证邮箱" icon="email"></Step>
+    </Steps>
+    <br>
+    <p>当前正在进行第 {{ current + 1 }} 步</p>
+    <Steps :current="current">
+        <Step title="步骤1"></Step>
+        <Step title="步骤2"></Step>
+        <Step title="步骤3"></Step>
+        <Step title="步骤4"></Step>
+    </Steps>
+    <i-button type="primary" @click="next">下一步</i-button>
+    <br><br>
+    <Steps :current="1" direction="vertical" size="small">
+        <Step title="已完成" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息这里是该步骤的描述信息这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+    <br><br>
+    <Steps :current="1" status="error">
+        <Step title="已完成" content="这里是该步骤的描述信息"></Step>
+        <Step title="进行中" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+        <Step title="待进行" content="这里是该步骤的描述信息"></Step>
+    </Steps>
+</template>
+<script>
+    import { Page, Steps, Button } from 'iview';
+
+    const Step = Steps.Step;
+
+    export default {
+        components: {
+            Page,
+            Steps,
+            Step,
+            iButton: Button
+        },
+        props: {
+
+        },
+        data () {
+            return {
+                total: 512,
+                current: 0
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            setPage (page) {
+                console.log(page)
+            },
+            next () {
+                if (this.current == 3) {
+                    this.current = 0;
+                } else {
+                    this.current += 1;
+                }
+            }
+        }
+    }
+</script>