From 3d89e9eb3b19fc0693e462bbbd6197513e3061a3 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 13:54:54 +0800
Subject: [PATCH] add Tabs

---
 src/code/tabs.js                 |  70 +++++++++++++++
 src/router.js                    |   7 ++
 src/views/components/tab-bar.vue |   2 +-
 src/views/components/tabs.vue    | 145 +++++++++++++++++++++++++++++++
 4 files changed, 223 insertions(+), 1 deletion(-)
 create mode 100644 src/code/tabs.js
 create mode 100644 src/views/components/tabs.vue

diff --git a/src/code/tabs.js b/src/code/tabs.js
new file mode 100644
index 0000000..bdb9026
--- /dev/null
+++ b/src/code/tabs.js
@@ -0,0 +1,70 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-tabs": "../../dist/tabs/index",
+    "i-tab": "../../dist/tab/index"
+}
+`;
+code.usage = `
+基本用法
+
+<i-tabs current="{{ current }}" bindchange="handleChange">
+    <i-tab key="tab1" title="选项1"></i-tab>
+    <i-tab key="tab2" title="选项2"></i-tab>
+    <i-tab key="tab3" title="选项3"></i-tab>
+</i-tabs>
+
+自定义主题色
+
+<i-tabs current="{{ current }}" color="#f759ab" bindchange="handleChange">
+    <i-tab key="tab1" title="选项1"></i-tab>
+    <i-tab key="tab2" title="选项2"></i-tab>
+    <i-tab key="tab3" title="选项3"></i-tab>
+</i-tabs>
+
+徽标
+
+<i-tabs current="{{ current }}" bindchange="handleChange">
+    <i-tab key="tab1" title="选项1" count="3"></i-tab>
+    <i-tab key="tab2" title="选项2"></i-tab>
+    <i-tab key="tab3" title="选项3" dot></i-tab>
+</i-tabs>
+
+滚动
+
+<i-tabs current="{{ current_scroll }}" scroll bindchange="handleChangeScroll">
+    <i-tab key="tab1" title="选项1"></i-tab>
+    <i-tab key="tab2" title="选项2"></i-tab>
+    <i-tab key="tab3" title="选项3"></i-tab>
+    <i-tab key="tab4" title="选项4"></i-tab>
+    <i-tab key="tab5" title="选项5"></i-tab>
+    <i-tab key="tab6" title="选项6"></i-tab>
+    <i-tab key="tab7" title="选项7"></i-tab>
+    <i-tab key="tab8" title="选项8"></i-tab>
+    <i-tab key="tab9" title="选项9"></i-tab>
+</i-tabs>
+`;
+
+code.js = `
+Page({
+    data: {
+        current: 'tab1',
+        current_scroll: 'tab1'
+    },
+
+    handleChange ({ detail }) {
+        this.setData({
+            current: detail.key
+        });
+    },
+
+    handleChangeScroll ({ detail }) {
+        this.setData({
+            current_scroll: detail.key
+        });
+    }
+});
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index a43dbd2..bfdfbb3 100755
--- a/src/router.js
+++ b/src/router.js
@@ -86,6 +86,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/tab-bar.vue'], resolve)
     },
+    {
+        path: '/components/tabs',
+        meta: {
+            title: '标签页 Tabs'
+        },
+        component: (resolve) => require(['./views/components/tabs.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/tab-bar.vue b/src/views/components/tab-bar.vue
index 8c0d4cf..027719a 100644
--- a/src/views/components/tab-bar.vue
+++ b/src/views/components/tab-bar.vue
@@ -100,7 +100,7 @@
                     </tr>
                     <tr>
                         <td>key</td>
-                        <td>面板的唯一标识</td>
+                        <td>标签的唯一标识</td>
                         <td>String</td>
                         <td>-</td>
                     </tr>
diff --git a/src/views/components/tabs.vue b/src/views/components/tabs.vue
new file mode 100644
index 0000000..c359adb
--- /dev/null
+++ b/src/views/components/tabs.vue
@@ -0,0 +1,145 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Tabs 标签页</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="Tabs 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>当前所在的标签的 key 值</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>color</td>
+                            <td>主题色</td>
+                            <td>String</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>scroll</td>
+                            <td>是否开启横向滚动</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                        <tr>
+                            <td>fixed</td>
+                            <td>是否固定在底部</td>
+                            <td>Boolean</td>
+                            <td>false</td>
+                        </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Tabs events" h3></Anchor>
+                <table>
+                    <thead>
+                    <tr>
+                        <th>事件名</th>
+                        <th>说明</th>
+                        <th>返回值</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>bind:change</td>
+                        <td>切换标签时触发</td>
+                        <td>{ key }</td>
+                    </tr>
+                    </tbody>
+                </table>
+                <Anchor title="Tab 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>key</td>
+                        <td>标签的唯一标识</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>title</td>
+                        <td>名称</td>
+                        <td>String</td>
+                        <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>dot</td>
+                        <td>是否显示小红点</td>
+                        <td>Boolean</td>
+                        <td>false</td>
+                    </tr>
+                    <tr>
+                        <td>count</td>
+                        <td>徽标数</td>
+                        <td>Number</td>
+                        <td>0</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/tabs';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file