From b8273bfc26c7472b34cb9731f10f24faa67c4619 Mon Sep 17 00:00:00 2001
From: jingsam <jingsam@163.com>
Date: Mon, 31 Oct 2016 22:11:51 +0800
Subject: [PATCH] add a nav for test page

---
 test/app.vue                            |  33 +++++++
 test/main.js                            |  50 +++++------
 test/routers/{layout.vue => card.vue}   |   0
 test/routers/index.vue                  |  58 ------------
 test/routers/{msg.vue => message.vue}   |   0
 test/routers/page.vue                   | 115 ++++++++----------------
 test/routers/{notice.vue => poptip.vue} |   0
 test/routers/{tag.vue => slider.vue}    |   0
 test/routers/step.vue                   |  97 ++++++++++++++++++++
 9 files changed, 193 insertions(+), 160 deletions(-)
 rename test/routers/{layout.vue => card.vue} (100%)
 delete mode 100644 test/routers/index.vue
 rename test/routers/{msg.vue => message.vue} (100%)
 rename test/routers/{notice.vue => poptip.vue} (100%)
 rename test/routers/{tag.vue => slider.vue} (100%)
 create mode 100644 test/routers/step.vue

diff --git a/test/app.vue b/test/app.vue
index 7c7fa7b6..fa60d96d 100644
--- a/test/app.vue
+++ b/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>
diff --git a/test/main.js b/test/main.js
index 01731bfc..f5ddd0b0 100644
--- a/test/main.js
+++ b/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');
diff --git a/test/routers/layout.vue b/test/routers/card.vue
similarity index 100%
rename from test/routers/layout.vue
rename to test/routers/card.vue
diff --git a/test/routers/index.vue b/test/routers/index.vue
deleted file mode 100644
index 6e69d396..00000000
--- a/test/routers/index.vue
+++ /dev/null
@@ -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>
diff --git a/test/routers/msg.vue b/test/routers/message.vue
similarity index 100%
rename from test/routers/msg.vue
rename to test/routers/message.vue
diff --git a/test/routers/page.vue b/test/routers/page.vue
index aabb928e..6e69d396 100644
--- a/test/routers/page.vue
+++ b/test/routers/page.vue
@@ -2,95 +2,56 @@
 
 </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>
+    <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 { Page, Steps, Button } from 'iview';
-
-    const Step = Steps.Step;
+    import { Modal, Button, Message, Page } from 'iview';
 
     export default {
-        components: {
-            Page,
-            Steps,
-            Step,
-            iButton: Button
-        },
+        components: { Modal, Button, Page },
         props: {
-
+        
         },
         data () {
             return {
-                total: 512,
-                current: 0
-            }
-        },
-        computed: {
 
+            }        
         },
         methods: {
-            setPage (page) {
-                console.log(page)
+            info () {
+                Modal.info({
+                    title: '这是对话框标题',
+                    content: `<p>这是对话框内容</p><p>这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容这是对话框内容</p>`
+                });
             },
-            next () {
-                if (this.current == 3) {
-                    this.current = 0;
-                } else {
-                    this.current += 1;
-                }
+            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
+                });
             }
         }
     }
diff --git a/test/routers/notice.vue b/test/routers/poptip.vue
similarity index 100%
rename from test/routers/notice.vue
rename to test/routers/poptip.vue
diff --git a/test/routers/tag.vue b/test/routers/slider.vue
similarity index 100%
rename from test/routers/tag.vue
rename to test/routers/slider.vue
diff --git a/test/routers/step.vue b/test/routers/step.vue
new file mode 100644
index 00000000..aabb928e
--- /dev/null
+++ b/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>