From e3fc35ca5d3053b8bf835e52fd5ba0eb7fae792e 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 17:43:23 +0800
Subject: [PATCH] add Avatar

---
 src/code/avatar.js              | 26 +++++++++++
 src/router.js                   |  7 +++
 src/views/components/avatar.vue | 77 +++++++++++++++++++++++++++++++++
 3 files changed, 110 insertions(+)
 create mode 100644 src/code/avatar.js
 create mode 100644 src/views/components/avatar.vue

diff --git a/src/code/avatar.js b/src/code/avatar.js
new file mode 100644
index 0000000..c6122cf
--- /dev/null
+++ b/src/code/avatar.js
@@ -0,0 +1,26 @@
+let code = {};
+
+code.import = `
+"usingComponents": {
+    "i-avatar": "../../dist/avatar/index"
+}
+`;
+code.usage = `
+<i-avatar size="small">梁</i-avatar>
+<i-avatar>梁</i-avatar>
+<i-avatar size="large">梁</i-avatar>
+
+<i-avatar size="small" shape="square">A</i-avatar>
+<i-avatar shape="square">A</i-avatar>
+<i-avatar size="large" shape="square">A</i-avatar>
+
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small"></i-avatar>
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default"></i-avatar>
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large"></i-avatar>
+
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="small" shape="square"></i-avatar>
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="default" shape="square"></i-avatar>
+<i-avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg" size="large" shape="square"></i-avatar>
+`;
+
+export default code;
\ No newline at end of file
diff --git a/src/router.js b/src/router.js
index 3528390..eac65dd 100755
--- a/src/router.js
+++ b/src/router.js
@@ -184,6 +184,13 @@ const routers = [
         },
         component: (resolve) => require(['./views/components/progress.vue'], resolve)
     },
+    {
+        path: '/components/avatar',
+        meta: {
+            title: '头像 Avatar'
+        },
+        component: (resolve) => require(['./views/components/avatar.vue'], resolve)
+    },
     {
         path: '*',
         redirect: '/'
diff --git a/src/views/components/avatar.vue b/src/views/components/avatar.vue
new file mode 100644
index 0000000..5314a81
--- /dev/null
+++ b/src/views/components/avatar.vue
@@ -0,0 +1,77 @@
+<template>
+    <i-article>
+        <article>
+            <h1>Avatar 头像</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>
+            <ad></ad>
+
+            <div class="api">
+                <Anchor title="API" h2></Anchor>
+                <Anchor title="Avatar 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>shape</td>
+                            <td>指定头像的形状，可选值为 circle、square</td>
+                            <td>String</td>
+                            <td>circle</td>
+                        </tr>
+                        <tr>
+                            <td>size</td>
+                            <td>设置头像的大小，可选值为 large、small、default</td>
+                            <td>String</td>
+                            <td>default</td>
+                        </tr>
+                        <tr>
+                            <td>src</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/avatar';
+    import Anchor from '../../components/anchor.vue';
+
+    export default {
+        components: {
+            iArticle,
+            iCode,
+            Demo,
+            Anchor
+        },
+        data () {
+            return {
+                code: Code
+            }
+        }
+    }
+</script>
\ No newline at end of file