other / mew-iview

Commit 9d6b35e49b5c5e1fe2d0c3935af27efb20c53a44

Authored by 梁灏
1 parent b40e2e96

Progress add prop success-percent

Showing 4 changed files with 33 additions and 37 deletions   Show diff stats
Inline Side-by-side
examples/routers/progress.vue
  Show/Hide comments   View file @9d6b35e
1 <template> 1 <template>
2 <div> 2 <div>
3 - <i-progress :percent="percent"></i-progress>  
4 - <Button-group size="large">  
5 - <Button icon="ios-plus-empty" @click.native="add"></Button>  
6 - <Button icon="ios-minus-empty" @click.native="minus"></Button>  
7 - </Button-group>  
8 - <i-progress :percent="25" :stroke-width="5"></i-progress>  
9 - <i-progress :percent="100">  
10 - <Icon type="checkmark-circled"></Icon>  
11 - <span>成功</span>  
12 - </i-progress>  
13 - <i-progress :percent="percent"></i-progress>  
14 - <div style="height: 150px">  
15 - <i-progress vertical :percent="percent" :stroke-width="20" hide-info></i-progress>  
16 - <i-progress vertical :percent="percent"></i-progress>  
17 - </div> 3 + <Progress :percent="25"></Progress>
  4 + <br><br>
  5 + <Progress :percent="25" :success-percent="10"></Progress>
18 </div> 6 </div>
19 </template> 7 </template>
20 <script> 8 <script>
21 export default { 9 export default {
22 - data () {  
23 - return {  
24 - percent: 0  
25 - }  
26 - },  
27 - methods: {  
28 - add () {  
29 - if (this.percent >= 100) {  
30 - return false;  
31 - }  
32 - this.percent += 10;  
33 - },  
34 - minus () {  
35 - if (this.percent <= 0) {  
36 - return false;  
37 - }  
38 - this.percent -= 10;  
39 - }  
40 - } 10 +
41 } 11 }
42 </script> 12 </script>
src/components/circle/circle.vue
  Show/Hide comments   View file @9d6b35e
@@ -96,13 +96,13 @@ @@ -96,13 +96,13 @@
96 style = { 96 style = {
97 'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`, 97 'stroke-dasharray': `${(this.percent / 100) * (this.len - 75)}px ${this.len}px`,
98 'stroke-dashoffset': `-${75 / 2}px`, 98 'stroke-dashoffset': `-${75 / 2}px`,
99 - 'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s' 99 + 'transition': 'stroke-dashoffset .3s ease 0s, stroke-dasharray .6s ease 0s, stroke .6s, stroke-width .06s ease .6s'
100 }; 100 };
101 } else { 101 } else {
102 style = { 102 style = {
103 'stroke-dasharray': `${this.len}px ${this.len}px`, 103 'stroke-dasharray': `${this.len}px ${this.len}px`,
104 'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`, 104 'stroke-dashoffset': `${((100 - this.percent) / 100 * this.len)}px`,
105 - 'transition': 'stroke-dashoffset 0.3s ease 0s, stroke 0.3s ease' 105 + 'transition': 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
106 }; 106 };
107 } 107 }
108 return style; 108 return style;
src/components/progress/progress.vue
  Show/Hide comments   View file @9d6b35e
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 <div :class="outerClasses"> 3 <div :class="outerClasses">
4 <div :class="innerClasses"> 4 <div :class="innerClasses">
5 <div :class="bgClasses" :style="bgStyle"></div> 5 <div :class="bgClasses" :style="bgStyle"></div>
  6 + <div :class="successBgClasses" :style="successBgStyle"></div>
6 </div> 7 </div>
7 </div> 8 </div>
8 <span v-if="!hideInfo" :class="textClasses"> 9 <span v-if="!hideInfo" :class="textClasses">
@@ -30,6 +31,10 @@ @@ -30,6 +31,10 @@
30 type: Number, 31 type: Number,
31 default: 0 32 default: 0
32 }, 33 },
  34 + successPercent: {
  35 + type: Number,
  36 + default: 0
  37 + },
33 status: { 38 status: {
34 validator (value) { 39 validator (value) {
35 return oneOf(value, ['normal', 'active', 'wrong', 'success']); 40 return oneOf(value, ['normal', 'active', 'wrong', 'success']);
@@ -80,6 +85,15 @@ @@ -80,6 +85,15 @@
80 height: `${this.strokeWidth}px` 85 height: `${this.strokeWidth}px`
81 }; 86 };
82 }, 87 },
  88 + successBgStyle () {
  89 + return this.vertical ? {
  90 + height: `${this.successPercent}%`,
  91 + width: `${this.strokeWidth}px`
  92 + } : {
  93 + width: `${this.successPercent}%`,
  94 + height: `${this.strokeWidth}px`
  95 + };
  96 + },
83 wrapClasses () { 97 wrapClasses () {
84 return [ 98 return [
85 `${prefixCls}`, 99 `${prefixCls}`,
@@ -105,6 +119,9 @@ @@ -105,6 +119,9 @@
105 }, 119 },
106 bgClasses () { 120 bgClasses () {
107 return `${prefixCls}-bg`; 121 return `${prefixCls}-bg`;
  122 + },
  123 + successBgClasses () {
  124 + return `${prefixCls}-success-bg`;
108 } 125 }
109 }, 126 },
110 created () { 127 created () {
src/styles/components/progress.less
  Show/Hide comments   View file @9d6b35e
@@ -34,6 +34,7 @@ @@ -34,6 +34,7 @@
34 background-color: #f3f3f3; 34 background-color: #f3f3f3;
35 border-radius: 100px; 35 border-radius: 100px;
36 vertical-align: middle; 36 vertical-align: middle;
  37 + position: relative;
37 } 38 }
38 &-vertical &-inner { 39 &-vertical &-inner {
39 height: 100%; 40 height: 100%;
@@ -52,10 +53,18 @@ @@ -52,10 +53,18 @@
52 53
53 &-bg { 54 &-bg {
54 border-radius: 100px; 55 border-radius: 100px;
55 - background-color: @info-color; 56 + background-color: @primary-color;
56 transition: all @transition-time linear; 57 transition: all @transition-time linear;
57 position: relative; 58 position: relative;
58 } 59 }
  60 + &-success-bg{
  61 + border-radius: 100px;
  62 + background-color: @success-color;
  63 + transition: all @transition-time linear;
  64 + position: absolute;
  65 + top: 0;
  66 + left: 0;
  67 + }
59 68
60 &-text { 69 &-text {
61 display: inline-block; 70 display: inline-block;