Circle add prop dashboard

examples/routers/circle.vue

@@ -1,57 +1,44 @@
-<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
+    <div>
-            :size="250"
+        <i-circle :percent="percent" dashboard :stroke-color="color">
-            :trail-width="4"
+            <Icon v-if="percent == 100" type="ios-checkmark" size="60" style="color:#5cb85c"></Icon>
-            :stroke-width="5"
+            <span v-else style="font-size:24px">{{ percent }}%</span>
-            :percent="75"
+        </i-circle>
-            stroke-linecap="square"
+        <ButtonGroup size="large">
-            stroke-color="#43a3fb">
+            <Button icon="ios-add" @click="add"></Button>
-        <div class="demo-circle-custom">
+            <Button icon="ios-remove" @click="minus"></Button>
-            <h1>{{ 42001776 }}</h1>
+        </ButtonGroup>
-            <p>消费人群规模</p>
+    </div>
-            <span>
-                总占人数
-                <i>75%</i>
-            </span>
-        </div>
-    </i-circle>
 </template>
 <script>
     export default {
-
+        data () {
+            return {
+                percent: 0
+            }
+        },
+        computed: {
+            color () {
+                let color = '#2db7f5';
+                if (this.percent == 100) {
+                    color = '#5cb85c';
+                }
+                return color;
+            }
+        },
+        methods: {
+            add () {
+                if (this.percent >= 100) {
+                    return false;
+                }
+                this.percent += 10;
+            },
+            minus () {
+                if (this.percent <= 0) {
+                    return false;
+                }
+                this.percent -= 10;
+            }
+        }
     }
 </script>

src/components/circle/circle.vue

@@ -1,8 +1,8 @@
 <template>
     <div :style="circleSize" :class="wrapClasses">
         <svg viewBox="0 0 100 100">
-            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0"/>
+            <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" />
-            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="strokeWidth" fill-opacity="0" :style="pathStyle"/>
+            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
         </svg>
         <div :class="innerClasses">
             <slot></slot>
@@ -46,6 +46,10 @@
             trailColor: {
                 type: String,
                 default: '#eaeef2'
+            },
+            dashboard: {
+                type: Boolean,
+                default: false
             }
         },
         computed: {
@@ -55,23 +59,53 @@
                     height: `${this.size}px`
                 };
             },
+            computedStrokeWidth () {
+                return this.percent === 0 && this.dashboard ? 0 : this.strokeWidth;
+            },
             radius () {
                 return 50 - this.strokeWidth / 2;
             },
             pathString () {
-                return `M 50,50 m 0,-${this.radius}
+                if (this.dashboard) {
-                a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
+                    return `M 50,50 m 0,${this.radius}
-                a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+                    a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}`;
+                } else {
+                    return `M 50,50 m 0,-${this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,${2 * this.radius}
+                    a ${this.radius},${this.radius} 0 1 1 0,-${2 * this.radius}`;
+                }
             },
             len () {
                 return Math.PI * 2 * this.radius;
             },
+            trailStyle () {
+                let style = {};
+                if (this.dashboard) {
+                    style = {
+                        'stroke-dasharray': `${this.len - 75}px ${this.len}px`,
+                        'stroke-dashoffset': `-${75 / 2}px`,
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s'
+                    }
+                }
+                return style;
+            },
             pathStyle () {
-                return {
+                let style = {};
-                    'stroke-dasharray': `${this.len}px ${this.len}px`,
+                if (this.dashboard) {
-                    'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
+                    style = {
-                    'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+                        'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
-                };
+                        'stroke-dashoffset': `-${75 / 2}px`,
+                        'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s'
+                    };
+                } else {
+                    style = {
+                        'stroke-dasharray': `${this.len}px ${this.len}px`,
+                        'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
+                        'transition': 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease'
+                    };
+                }
+                return style;
             },
             wrapClasses () {
                 return `${prefixCls}`;