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             |  38 +++++++++++++++++++-------------------
 test/routers/card.vue    |  38 ++++++++++++++++++++++++++++++++++++++
 test/routers/index.vue   |  58 ----------------------------------------------------------
 test/routers/layout.vue  |  38 --------------------------------------
 test/routers/message.vue |  72 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/routers/msg.vue     |  72 ------------------------------------------------------------------------
 test/routers/notice.vue  | 132 ------------------------------------------------------------------------------------------------------------------------------------
 test/routers/page.vue    | 115 ++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------
 test/routers/poptip.vue  | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/routers/slider.vue  |  26 ++++++++++++++++++++++++++
 test/routers/step.vue    |  97 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 test/routers/tag.vue     |  26 --------------------------
 13 files changed, 455 insertions(+), 422 deletions(-)
 create mode 100644 test/routers/card.vue
 delete mode 100644 test/routers/index.vue
 delete mode 100644 test/routers/layout.vue
 create mode 100644 test/routers/message.vue
 delete mode 100644 test/routers/msg.vue
 delete mode 100644 test/routers/notice.vue
 create mode 100644 test/routers/poptip.vue
 create mode 100644 test/routers/slider.vue
 create mode 100644 test/routers/step.vue
 delete mode 100644 test/routers/tag.vue

diff --git a/test/app.vue b/test/app.vue
index 7c7fa7b..fa60d96 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 01731bf..f5ddd0b 100644
--- a/test/main.js
+++ b/test/main.js
@@ -16,19 +16,19 @@ var router = new VueRouter({
 });
 
 router.map({
-    '/index': {
+    '/button': {
         component: function (resolve) {
-            require(['./routers/index.vue'], resolve);
+            require(['./routers/button.vue'], resolve);
         }
     },
-    '/button': {
+    '/card': {
         component: function (resolve) {
-            require(['./routers/button.vue'], resolve);
+            require(['./routers/card.vue'], resolve);
         }
     },
-    '/page': {
+    '/message': {
         component: function (resolve) {
-            require(['./routers/page.vue'], resolve);
+            require(['./routers/message.vue'], resolve);
         }
     },
     '/more': {
@@ -36,34 +36,34 @@ router.map({
             require(['./routers/more.vue'], resolve);
         }
     },
-    '/layout': {
+    '/page': {
         component: function (resolve) {
-            require(['./routers/layout.vue'], resolve);
+            require(['./routers/page.vue'], resolve);
         }
     },
-    '/radio': {
+    '/poptip': {
         component: function (resolve) {
-            require(['./routers/radio.vue'], resolve);
+            require(['./routers/poptip.vue'], resolve);
         }
     },
-    '/msg': {
+    '/radio': {
         component: function (resolve) {
-            require(['./routers/msg.vue'], resolve);
+            require(['./routers/radio.vue'], resolve);
         }
     },
-    '/notice': {
+    '/select': {
         component: function (resolve) {
-            require(['./routers/notice.vue'], resolve);
+            require(['./routers/select.vue'], resolve);
         }
     },
-    '/tag': {
+    '/slider': {
         component: function (resolve) {
-            require(['./routers/tag.vue'], resolve);
+            require(['./routers/slider.vue'], resolve);
         }
     },
-    '/select': {
+    '/step': {
         component: function (resolve) {
-            require(['./routers/select.vue'], 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/card.vue b/test/routers/card.vue
new file mode 100644
index 0000000..75fb31b
--- /dev/null
+++ b/test/routers/card.vue
@@ -0,0 +1,38 @@
+<template>
+    <Card :bordered="true" style="width:300px">
+        <template slot="title">
+            <p>放寒假的发货会计师</p>
+        </template>
+        <a href="#" slot="extra">More</a>
+    </Card>
+    <Card style="width:300px">
+        <p>hello</p>
+        <p>hndshf</p>
+        <h3>jfds</h3>
+    </Card>
+</template>
+<script>
+    import { Row, Col, Card } from 'iview';
+
+    export default {
+        components: {
+            Row,
+            iCol: Col,
+            Card
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+        
+        },
+        methods: {
+        
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/test/routers/index.vue b/test/routers/index.vue
deleted file mode 100644
index 6e69d39..0000000
--- 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/layout.vue b/test/routers/layout.vue
deleted file mode 100644
index 75fb31b..0000000
--- a/test/routers/layout.vue
+++ /dev/null
@@ -1,38 +0,0 @@
-<template>
-    <Card :bordered="true" style="width:300px">
-        <template slot="title">
-            <p>放寒假的发货会计师</p>
-        </template>
-        <a href="#" slot="extra">More</a>
-    </Card>
-    <Card style="width:300px">
-        <p>hello</p>
-        <p>hndshf</p>
-        <h3>jfds</h3>
-    </Card>
-</template>
-<script>
-    import { Row, Col, Card } from 'iview';
-
-    export default {
-        components: {
-            Row,
-            iCol: Col,
-            Card
-        },
-        props: {
-        
-        },
-        data () {
-            return {
-            
-            }
-        },
-        computed: {
-        
-        },
-        methods: {
-        
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/test/routers/message.vue b/test/routers/message.vue
new file mode 100644
index 0000000..6d84321
--- /dev/null
+++ b/test/routers/message.vue
@@ -0,0 +1,72 @@
+<template>
+    <Button @click="info">info</Button>
+    <Button @click="success">success</Button>
+    <Button @click="error">error</Button>
+    <Button @click="warning">warning</Button>
+    <Button @click="loading">手动消失</Button>
+    <Button @click="destroy">destroy</Button>
+    <Alert closable>消息提示文案</Alert>
+    <Alert type="success" show-icon closable>
+        成功提示文案
+        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
+    </Alert>
+    <Card :bordered="false">
+        <p slot="title">无边框标题</p>
+        <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
+    </Card>
+</template>
+<script>
+    import { Message, Button, Alert, Card } from 'iview';
+
+    export default {
+        components: {
+            Message,
+            Button,
+            Alert,
+            Card
+        },
+        props: {
+        
+        },
+        data () {
+            return {
+            
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            info () {
+                Message.info('欢迎来到iView', 3, () => {
+                    console.log('close info');
+                });
+            },
+            success () {
+                Message.success('成功啦', 5, () => {
+                    console.log('close successs');
+                });
+            },
+            error () {
+                Message.error('错误啦');
+            },
+            warning () {
+                Message.warning('来个警告');
+            },
+            loading () {
+                const hide = Message.loading('我是loading', 0);
+
+                setTimeout(hide, 5000);
+            },
+            destroy () {
+                Message.destroy();
+            }
+        },
+        ready () {
+//            Message.config({
+//                top: 50,
+//                duration: 8
+//            });
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/test/routers/msg.vue b/test/routers/msg.vue
deleted file mode 100644
index 6d84321..0000000
--- a/test/routers/msg.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-    <Button @click="info">info</Button>
-    <Button @click="success">success</Button>
-    <Button @click="error">error</Button>
-    <Button @click="warning">warning</Button>
-    <Button @click="loading">手动消失</Button>
-    <Button @click="destroy">destroy</Button>
-    <Alert closable>消息提示文案</Alert>
-    <Alert type="success" show-icon closable>
-        成功提示文案
-        <span slot="desc">成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案成功的提示描述文案</span>
-    </Alert>
-    <Card :bordered="false">
-        <p slot="title">无边框标题</p>
-        <p>无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充无边框内容填充。</p>
-    </Card>
-</template>
-<script>
-    import { Message, Button, Alert, Card } from 'iview';
-
-    export default {
-        components: {
-            Message,
-            Button,
-            Alert,
-            Card
-        },
-        props: {
-        
-        },
-        data () {
-            return {
-            
-            }
-        },
-        computed: {
-
-        },
-        methods: {
-            info () {
-                Message.info('欢迎来到iView', 3, () => {
-                    console.log('close info');
-                });
-            },
-            success () {
-                Message.success('成功啦', 5, () => {
-                    console.log('close successs');
-                });
-            },
-            error () {
-                Message.error('错误啦');
-            },
-            warning () {
-                Message.warning('来个警告');
-            },
-            loading () {
-                const hide = Message.loading('我是loading', 0);
-
-                setTimeout(hide, 5000);
-            },
-            destroy () {
-                Message.destroy();
-            }
-        },
-        ready () {
-//            Message.config({
-//                top: 50,
-//                duration: 8
-//            });
-        }
-    }
-</script>
\ No newline at end of file
diff --git a/test/routers/notice.vue b/test/routers/notice.vue
deleted file mode 100644
index 4958cc8..0000000
--- a/test/routers/notice.vue
+++ /dev/null
@@ -1,132 +0,0 @@
-<style>
-    .tooltip_out{
-        padding: 150px;
-    }
-    body{
-        height: 1000px;
-        padding: 10px;
-    }
-    .api table{
-        font-family: Consolas,Menlo,Courier,monospace;
-        font-size: 13px;
-        border-collapse: collapse;
-        border-spacing: 0;
-        empty-cells: show;
-        border: 1px solid #e9e9e9;
-        width: 100%;
-        margin-bottom: 24px;
-    }
-    .api table th{
-        background: #f7f7f7;
-        white-space: nowrap;
-        color: #5c6b77;
-        font-weight: 600;
-    }
-    .api table td, .api table th{
-        border: 1px solid #e9e9e9;
-        padding: 8px 16px;
-        text-align: left;
-    }
-</style>
-<template>
-    <div class="tooltip_out">
-        <Poptip>
-            <a>click 激活</a>
-            <div slot="title"><i>自定义标题</i></div>
-            <div slot="content">
-                <a>关闭提示框</a>
-            </div>
-        </Poptip>
-        <Poptip placement="right" width="300">
-            <i-button type="ghost">click 激活</i-button>
-            <div class="api" slot="content">
-                <table>
-                    <thead>
-                    <tr>
-                        <th>属性</th>
-                        <th>说明</th>
-                        <th>类型</th>
-                        <th>默认值</th>
-                    </tr>
-                    </thead>
-                    <tbody>
-                    <tr>
-                        <td>content</td>
-                        <td>显示的内容</td>
-                        <td>String | Number</td>
-                        <td>空</td>
-                    </tr>
-                    <tr>
-                        <td>placement</td>
-                        <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
-                        <td>String</td>
-                        <td>bottom</td>
-                    </tr>
-                    <tr>
-                        <td>disabled</td>
-                        <td>是否禁用提示框</td>
-                        <td>Boolean</td>
-                        <td>false</td>
-                    </tr>
-                    <tr>
-                        <td>delay</td>
-                        <td>延迟显示，单位毫秒</td>
-                        <td>Number</td>
-                        <td>0</td>
-                    </tr>
-                    </tbody>
-                </table>
-            </div>
-        </Poptip>
-        <!--<Poptip title="标题" content="内容">-->
-            <!--<Button>click 触发</Button>-->
-        <!--</Poptip>-->
-        <!--<Poptip title="标题" content="内容" trigger="hover">-->
-            <!--<Button>hover 触发</Button>-->
-        <!--</Poptip>-->
-        <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
-            <a><strong>Delete</strong></a>
-        </Poptip>
-        <!--<Poptip title="标题" content="内容" trigger="focus">-->
-            <!--<input type="text">-->
-        <!--</Poptip>-->
-        <!--<Poptip title="标题" content="内容" trigger="focus">-->
-            <!--<Button>focus 触发</Button>-->
-        <!--</Poptip>-->
-        <!--<Tooltip content="这里是提示文字">-->
-            <!--当鼠标经过这段文字时，会显示一个气泡框-->
-        <!--</Tooltip>-->
-        <Poptip>
-            <a>click 激活</a>
-            <div slot="content">
-                <a>关闭提示框</a>
-            </div>
-        </Poptip>
-    </div>
-</template>
-<script>
-    import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
-
-    export default {
-        components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message },
-        props: {
-
-        },
-        data () {
-            return {
-
-            }
-        },
-        computed: {
-
-        },
-        methods: {
-            ok () {
-                Message.info('ok');
-            },
-            cancel () {
-                Message.info('cancel');
-            }
-        }
-    }
-</script>
diff --git a/test/routers/page.vue b/test/routers/page.vue
index aabb928..6e69d39 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>`
+                });
+            },
+            success () {
+                Modal.success();
+            },
+            warning () {
+                Modal.warning();
+            },
+            error () {
+                Modal.error();
             },
-            next () {
-                if (this.current == 3) {
-                    this.current = 0;
-                } else {
-                    this.current += 1;
-                }
+            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/poptip.vue b/test/routers/poptip.vue
new file mode 100644
index 0000000..4958cc8
--- /dev/null
+++ b/test/routers/poptip.vue
@@ -0,0 +1,132 @@
+<style>
+    .tooltip_out{
+        padding: 150px;
+    }
+    body{
+        height: 1000px;
+        padding: 10px;
+    }
+    .api table{
+        font-family: Consolas,Menlo,Courier,monospace;
+        font-size: 13px;
+        border-collapse: collapse;
+        border-spacing: 0;
+        empty-cells: show;
+        border: 1px solid #e9e9e9;
+        width: 100%;
+        margin-bottom: 24px;
+    }
+    .api table th{
+        background: #f7f7f7;
+        white-space: nowrap;
+        color: #5c6b77;
+        font-weight: 600;
+    }
+    .api table td, .api table th{
+        border: 1px solid #e9e9e9;
+        padding: 8px 16px;
+        text-align: left;
+    }
+</style>
+<template>
+    <div class="tooltip_out">
+        <Poptip>
+            <a>click 激活</a>
+            <div slot="title"><i>自定义标题</i></div>
+            <div slot="content">
+                <a>关闭提示框</a>
+            </div>
+        </Poptip>
+        <Poptip placement="right" width="300">
+            <i-button type="ghost">click 激活</i-button>
+            <div class="api" slot="content">
+                <table>
+                    <thead>
+                    <tr>
+                        <th>属性</th>
+                        <th>说明</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>content</td>
+                        <td>显示的内容</td>
+                        <td>String | Number</td>
+                        <td>空</td>
+                    </tr>
+                    <tr>
+                        <td>placement</td>
+                        <td>提示框出现的位置，可选值为<code>top</code><code>top-start</code><code>top-end</code><code>bottom</code><code>bottom-start</code><code>bottom-end</code><code>left</code><code>left-start</code><code>left-end</code><code>right</code><code>right-start</code><code>right-end</code></td>
+                        <td>String</td>
+                        <td>bottom</td>
+                    </tr>
+                    <tr>
+                        <td>disabled</td>
+                        <td>是否禁用提示框</td>
+                        <td>Boolean</td>
+                        <td>false</td>
+                    </tr>
+                    <tr>
+                        <td>delay</td>
+                        <td>延迟显示，单位毫秒</td>
+                        <td>Number</td>
+                        <td>0</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </Poptip>
+        <!--<Poptip title="标题" content="内容">-->
+            <!--<Button>click 触发</Button>-->
+        <!--</Poptip>-->
+        <!--<Poptip title="标题" content="内容" trigger="hover">-->
+            <!--<Button>hover 触发</Button>-->
+        <!--</Poptip>-->
+        <Poptip title="确定删除这条信息吗？" confirm content="内容" trigger="focus" @on-ok="ok" @on-cancel="cancel">
+            <a><strong>Delete</strong></a>
+        </Poptip>
+        <!--<Poptip title="标题" content="内容" trigger="focus">-->
+            <!--<input type="text">-->
+        <!--</Poptip>-->
+        <!--<Poptip title="标题" content="内容" trigger="focus">-->
+            <!--<Button>focus 触发</Button>-->
+        <!--</Poptip>-->
+        <!--<Tooltip content="这里是提示文字">-->
+            <!--当鼠标经过这段文字时，会显示一个气泡框-->
+        <!--</Tooltip>-->
+        <Poptip>
+            <a>click 激活</a>
+            <div slot="content">
+                <a>关闭提示框</a>
+            </div>
+        </Poptip>
+    </div>
+</template>
+<script>
+    import { Tooltip, Button, Row, iCol, Poptip, iSelect, iOption, Message } from 'iview';
+
+    export default {
+        components: { Tooltip, iButton: Button, Row, iCol, Poptip, iSelect, iOption, Message },
+        props: {
+
+        },
+        data () {
+            return {
+
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+            ok () {
+                Message.info('ok');
+            },
+            cancel () {
+                Message.info('cancel');
+            }
+        }
+    }
+</script>
diff --git a/test/routers/slider.vue b/test/routers/slider.vue
new file mode 100644
index 0000000..72a3ee6
--- /dev/null
+++ b/test/routers/slider.vue
@@ -0,0 +1,26 @@
+<style>
+    body{
+        padding: 50px;
+    }
+</style>
+<template>
+    <Slider :value="10" :tip-format="format">
+
+    </Slider>
+</template>
+<script>
+    import { Slider } from 'iview';
+    export default {
+        components: { Slider },
+        data () {
+            return {
+
+            }
+        },
+        methods: {
+            format (val) {
+                return `进度：${val}%`
+            }
+        }
+    }
+</script>
diff --git a/test/routers/step.vue b/test/routers/step.vue
new file mode 100644
index 0000000..aabb928
--- /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>
diff --git a/test/routers/tag.vue b/test/routers/tag.vue
deleted file mode 100644
index 72a3ee6..0000000
--- a/test/routers/tag.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<style>
-    body{
-        padding: 50px;
-    }
-</style>
-<template>
-    <Slider :value="10" :tip-format="format">
-
-    </Slider>
-</template>
-<script>
-    import { Slider } from 'iview';
-    export default {
-        components: { Slider },
-        data () {
-            return {
-
-            }
-        },
-        methods: {
-            format (val) {
-                return `进度：${val}%`
-            }
-        }
-    }
-</script>
--
libgit2 0.21.4