support Circle

support Circle. change Circle to iCircle

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
+废弃 data，改为 value，使用 v-model，key 更名为 name，不能再 template 的prop 上使用 this
+### Circle
+改名为 iCircle

README.md

@@ -56,7 +56,7 @@
 - [ ] Breadcrumb
 - [x] Steps
 - [ ] LoadingBar
-- [ ] Circle
+- [x] Circle
 - [x] Affix
 - [ ] BackTop
 - [ ] Spin

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,

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>

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')
         }
     ]
 });

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>