Commit 0823f88b2d8fd89d101a3f4596e8b31363f8c0ca
1 parent
fdafcd2c
Badge add status
Showing
4 changed files
with
90 additions
and
0 deletions
Show diff stats
examples/routers/badge.vue
| @@ -25,6 +25,24 @@ | @@ -25,6 +25,24 @@ | ||
| 25 | <Badge text="hot"> | 25 | <Badge text="hot"> |
| 26 | <Button type="ghost">Hello</Button> | 26 | <Button type="ghost">Hello</Button> |
| 27 | </Badge> | 27 | </Badge> |
| 28 | + <br><br> | ||
| 29 | + <div> | ||
| 30 | + <Badge status="success" /> | ||
| 31 | + <Badge status="error" /> | ||
| 32 | + <Badge status="default" /> | ||
| 33 | + <Badge status="processing" /> | ||
| 34 | + <Badge status="warning" /> | ||
| 35 | + <br /> | ||
| 36 | + <Badge status="success" text="Success" /> | ||
| 37 | + <br /> | ||
| 38 | + <Badge status="error" text="Error" /> | ||
| 39 | + <br /> | ||
| 40 | + <Badge status="default" text="Default" /> | ||
| 41 | + <br /> | ||
| 42 | + <Badge status="processing" text="Processing" /> | ||
| 43 | + <br /> | ||
| 44 | + <Badge status="warning" text="Warning" /> | ||
| 45 | + </div> | ||
| 28 | </div> | 46 | </div> |
| 29 | </template> | 47 | </template> |
| 30 | <script> | 48 | <script> |
src/components/badge/badge.vue
| @@ -3,6 +3,10 @@ | @@ -3,6 +3,10 @@ | ||
| 3 | <slot></slot> | 3 | <slot></slot> |
| 4 | <sup :class="dotClasses" v-show="badge"></sup> | 4 | <sup :class="dotClasses" v-show="badge"></sup> |
| 5 | </span> | 5 | </span> |
| 6 | + <span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge"> | ||
| 7 | + <span :class="statusClasses"></span> | ||
| 8 | + <span class="ivu-badge-status-text">{{ text }}</span> | ||
| 9 | + </span> | ||
| 6 | <span v-else :class="classes" ref="badge"> | 10 | <span v-else :class="classes" ref="badge"> |
| 7 | <slot></slot> | 11 | <slot></slot> |
| 8 | <sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup> | 12 | <sup v-if="hasCount" :class="countClasses" v-show="badge">{{ finalCount }}</sup> |
| @@ -58,6 +62,14 @@ | @@ -58,6 +62,14 @@ | ||
| 58 | } | 62 | } |
| 59 | ]; | 63 | ]; |
| 60 | }, | 64 | }, |
| 65 | + statusClasses () { | ||
| 66 | + return [ | ||
| 67 | + `${prefixCls}-status-dot`, | ||
| 68 | + { | ||
| 69 | + [`${prefixCls}-status-${this.status}`]: !!this.status | ||
| 70 | + } | ||
| 71 | + ]; | ||
| 72 | + }, | ||
| 61 | finalCount () { | 73 | finalCount () { |
| 62 | if (this.text !== '') return this.text; | 74 | if (this.text !== '') return this.text; |
| 63 | return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count; | 75 | return parseInt(this.count) >= parseInt(this.overflowCount) ? `${this.overflowCount}+` : this.count; |
src/styles/components/badge.less
| @@ -53,4 +53,62 @@ | @@ -53,4 +53,62 @@ | ||
| 53 | z-index: 10; | 53 | z-index: 10; |
| 54 | box-shadow: 0 0 0 1px #fff; | 54 | box-shadow: 0 0 0 1px #fff; |
| 55 | } | 55 | } |
| 56 | + | ||
| 57 | + &-status { | ||
| 58 | + line-height: inherit; | ||
| 59 | + vertical-align: baseline; | ||
| 60 | + | ||
| 61 | + &-dot { | ||
| 62 | + width: 6px; | ||
| 63 | + height: 6px; | ||
| 64 | + display: inline-block; | ||
| 65 | + border-radius: 50%; | ||
| 66 | + vertical-align: middle; | ||
| 67 | + position: relative; | ||
| 68 | + top: -1px; | ||
| 69 | + } | ||
| 70 | + &-success { | ||
| 71 | + background-color: @success-color; | ||
| 72 | + } | ||
| 73 | + &-processing { | ||
| 74 | + background-color: @processing-color; | ||
| 75 | + position: relative; | ||
| 76 | + &:after { | ||
| 77 | + position: absolute; | ||
| 78 | + top: 0; | ||
| 79 | + left: 0; | ||
| 80 | + width: 100%; | ||
| 81 | + height: 100%; | ||
| 82 | + border-radius: 50%; | ||
| 83 | + border: 1px solid @processing-color; | ||
| 84 | + content: ''; | ||
| 85 | + animation: aniStatusProcessing 1.2s infinite ease-in-out; | ||
| 86 | + } | ||
| 87 | + } | ||
| 88 | + &-default { | ||
| 89 | + background-color: @normal-color; | ||
| 90 | + } | ||
| 91 | + &-error { | ||
| 92 | + background-color: @error-color; | ||
| 93 | + } | ||
| 94 | + &-warning { | ||
| 95 | + background-color: @warning-color; | ||
| 96 | + } | ||
| 97 | + &-text { | ||
| 98 | + color: @text-color; | ||
| 99 | + font-size: @font-size-small; | ||
| 100 | + margin-left: 8px; | ||
| 101 | + } | ||
| 102 | + } | ||
| 56 | } | 103 | } |
| 104 | + | ||
| 105 | +@keyframes aniStatusProcessing { | ||
| 106 | + 0% { | ||
| 107 | + transform: scale(0.8); | ||
| 108 | + opacity: 0.5; | ||
| 109 | + } | ||
| 110 | + 100% { | ||
| 111 | + transform: scale(2.4); | ||
| 112 | + opacity: 0; | ||
| 113 | + } | ||
| 114 | +} | ||
| 57 | \ No newline at end of file | 115 | \ No newline at end of file |
src/styles/custom.less
| @@ -6,8 +6,10 @@ | @@ -6,8 +6,10 @@ | ||
| 6 | @primary-color : #2d8cf0; | 6 | @primary-color : #2d8cf0; |
| 7 | @info-color : #2db7f5; | 7 | @info-color : #2db7f5; |
| 8 | @success-color : #19be6b; | 8 | @success-color : #19be6b; |
| 9 | +@processing-color : @primary-color; | ||
| 9 | @warning-color : #ff9900; | 10 | @warning-color : #ff9900; |
| 10 | @error-color : #ed3f14; | 11 | @error-color : #ed3f14; |
| 12 | +@normal-color : #d9d9d9; | ||
| 11 | @link-color : #2D8cF0; | 13 | @link-color : #2D8cF0; |
| 12 | @link-hover-color : tint(@link-color, 20%); | 14 | @link-hover-color : tint(@link-color, 20%); |
| 13 | @link-active-color : shade(@link-color, 5%); | 15 | @link-active-color : shade(@link-color, 5%); |