From b2d29401f71ba315b892b83f920db03c15c36e1c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Fri, 3 Mar 2017 11:54:23 +0800
Subject: [PATCH] support Circle

support Circle. change Circle to iCircle
---
 CHANGE.md               |  4 ++-
 README.md               |  2 +-
 src/index.js            |  4 +--
 test/app.vue            |  1 +
 test/main.js            |  4 +++
 test/routers/circle.vue | 57 +++++++++++++++++++++++++++++++++++++++++
 6 files changed, 68 insertions(+), 4 deletions(-)
 create mode 100644 test/routers/circle.vue

diff --git a/CHANGE.md b/CHANGE.md
index 503c2872..cf1065dd 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -23,4 +23,6 @@ class 改为了 className
 ### Carousel
 废弃 activeIndex，使用 v-model，v-for="n in slides.length",Vue2的数字循环，是从1开始的
 ### Tree
-废弃 data，改为 value，使用 v-model，key 更名为 name
\ No newline at end of file
+废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this
+### Circle
+改名为 iCircle
\ No newline at end of file
diff --git a/README.md b/README.md
index 7cb8dd5e..9962bafd 100644
--- a/README.md
+++ b/README.md
@@ -56,7 +56,7 @@
 - [ ] Breadcrumb
 - [x] Steps
 - [ ] LoadingBar
-- [ ] Circle
+- [x] Circle
 - [x] Affix
 - [ ] BackTop
 - [ ] Spin
diff --git a/src/index.js b/src/index.js
index d09f286c..5a5f4757 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,7 +11,7 @@ import Card from './components/card';
 import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
 import Checkbox from './components/checkbox';
-// import Circle from './components/circle';
+import Circle from './components/circle';
 import Collapse from './components/collapse';
 // import DatePicker from './components/date-picker';
 // import Dropdown from './components/dropdown';
@@ -62,7 +62,7 @@ const iview = {
     // Cascader,
     Checkbox,
     CheckboxGroup: Checkbox.Group,
-    // Circle,
+    iCircle: Circle,
     // DatePicker,
     // Dropdown,
     // DropdownItem: Dropdown.Item,
diff --git a/test/app.vue b/test/app.vue
index fb172276..22a1a621 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -33,6 +33,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/card">Card</router-link></li>
                 <li><router-link to="/tree">Tree</router-link></li>
                 <li><router-link to="/rate">Rate</router-link></li>
+                <li><router-link to="/circle">Circle</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index eaef5dc0..f9a9ca25 100644
--- a/test/main.js
+++ b/test/main.js
@@ -96,6 +96,10 @@ const router = new VueRouter({
         {
             path: '/rate',
             component: require('./routers/rate.vue')
+        },
+        {
+            path: '/circle',
+            component: require('./routers/circle.vue')
         }
     ]
 });
diff --git a/test/routers/circle.vue b/test/routers/circle.vue
new file mode 100644
index 00000000..7352e717
--- /dev/null
+++ b/test/routers/circle.vue
@@ -0,0 +1,57 @@
+<style lang="less">
+    .demo-circle-custom{
+    & h1{
+          color: #3f414d;
+          font-size: 28px;
+          font-weight: normal;
+      }
+    & p{
+          color: #657180;
+          font-size: 14px;
+          margin: 10px 0 15px;
+      }
+    & span{
+          display: block;
+          padding-top: 15px;
+          color: #657180;
+          font-size: 14px;
+    &:before{
+         content: '';
+         display: block;
+         width: 50px;
+         height: 1px;
+         margin: 0 auto;
+         background: #e0e3e6;
+         position: relative;
+         top: -15px;
+     };
+    }
+    & span i{
+          font-style: normal;
+          color: #3f414d;
+      }
+    }
+</style>
+<template>
+    <i-circle
+            :size="250"
+            :trail-width="4"
+            :stroke-width="5"
+            :percent="75"
+            stroke-linecap="square"
+            stroke-color="#43a3fb">
+        <div class="demo-circle-custom">
+            <h1>{{ 42001776 }}</h1>
+            <p>消费人群规模</p>
+            <span>
+                总占人数
+                <i>75%</i>
+            </span>
+        </div>
+    </i-circle>
+</template>
+<script>
+    export default {
+
+    }
+</script>