From 62d9f7473157edaaf9d44c9b6081740cbe547248 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Mon, 4 Jun 2018 14:53:09 +0800
Subject: [PATCH] add Steps

---
 src/code/steps.js              | 144 +++++++++++++++++++++++++++++++++
 src/router.js                  |   7 ++
 src/views/components/steps.vue | 122 ++++++++++++++++++++++++++++
 3 files changed, 273 insertions(+)
 create mode 100644 src/code/steps.js
 create mode 100644 src/views/components/steps.vue

diff --git a/src/code/steps.js b/src/code/steps.js
new file mode 100644
index 0000000..24d2d94
--- /dev/null
+++ b/src/code/steps.js
@@ -0,0 +1,144 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-steps": "../../dist/steps/index",
+    "i-step": "../../dist/step/index"
+}
+`;
+code.usage = `
+基本用法
+
+<i-steps>
+    <i-step status="finish">
+        <view slot="title">
+              已完成
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step status="process">
+        <view slot="title">
+            进行中
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step status="">
+        <view slot="title">
+            错误
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+</i-steps>
+
+使用 icon 图标
+
+<i-steps>
+    <i-step status="finish" icon="barrage">
+        <view slot="title">
+              已完成
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step status="process" icon="brush">
+        <view slot="title">
+            进行中
+        </view>
+        <view slot="content" icon="camera">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step  icon="collection">
+        <view slot="title">
+            错误
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+</i-steps>
+
+步骤进度
+
+<i-steps current="{{current}}">
+    <i-step>
+        <view slot="title">
+              已完成
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step>
+        <view slot="title">
+            进行中
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step>
+        <view slot="title">
+            错误
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+</i-steps>
+<i-button bindclick="handleClick">下一步</i-button>
+
+垂直方向
+
+<i-steps current="{{verticalCurrent}}" direction="vertical">
+    <i-step>
+        <view slot="title">
+              已完成
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step>
+        <view slot="title">
+            进行中
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+    <i-step>
+        <view slot="title">
+            错误
+        </view>
+        <view slot="content">
+            这里是该步骤的描述信息
+        </view>
+    </i-step>
+</i-steps>
+`;
+
+code.js = `
+Page({
+    data : {
+        current : 2,
+        verticalCurrent : 2
+    },
+    handleClick () {
+        const addCurrent = this.data.current + 1;
+        const current = addCurrent > 2 ? 0 : addCurrent;
+        this.setData({
+            'current' : current
+        })
+    }
+});
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 2a9093d..4bc4596 100755
--- a/src/router.js
+++ b/src/router.js
@@ -107,6 +107,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/page.vue'], resolve)
     },
+    {
+        path: '/components/steps',
+        meta: {
+            title: '步骤条 Steps'
+        },
+        component: (resolve) => require(['./views/components/steps.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/steps.vue b/src/views/components/steps.vue
new file mode 100644
index 0000000..7cf92d5
--- /dev/null
+++ b/src/views/components/steps.vue
@@ -0,0 +1,122 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Steps 步骤条</h1>
+            <Anchor title="概述" h2></Anchor>
+            <p>拆分某项流程的步骤，引导用户按流程完成任务。</p>
+            <Anchor title="使用指南" h2></Anchor>
+            <p>在 .json 中引入组件</p>
+            <i-code bg lang="json">{{ code.import }}</i-code>
+            <Anchor title="示例" h2></Anchor>
+            <i-code bg lang="html">{{ code.usage }}</i-code>
+            <br><br>
+            <i-code bg lang="js">{{ code.js }}</i-code>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Steps properties" h3></Anchor>
+                <table>
+                    <thead>
+                        <tr>
+                            <th>属性</th>
+                            <th>说明</th>
+                            <th>类型</th>
+                            <th>默认值</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>i-class</td>
+                            <td>自定义 class 类名</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>current</td>
+                            <td>当前步骤，从 0 开始计数</td>
+                            <td>Number</td>
+                            <td>-1</td>
+                        </tr>
+                        <tr>
+                            <td>status</td>
+                            <td>当前步骤的状态，可选值为 wait、process、finish、error</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>direction</td>
+                            <td>步骤条的方向，可选值为 horizontal（水平）或 vertical（垂直）</td>
+                            <td>String</td>
+                            <td>horizontal</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Step properties" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>属性</th>
+                        <th>说明</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>i-class</td>
+                        <td>自定义 class 类名</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>status</td>
+                        <td>步骤的状态，可选值为 wait、process、finish、error，不设置时自动判断</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>title</td>
+                        <td>标题</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>content</td>
+                        <td>步骤的详细描述，可选</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>icon</td>
+                        <td>步骤的图标，可选</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+        </article>
+    </i-article>
+</template>
+<script>
+    import iArticle from '../../components/article.vue';
+    import iCode from 'iCode';
+    import Demo from '../../components/demo.vue';
+    import Code from '../../code/steps';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file