Commit cc27c42a0d4a983831f522d9f3a5b36619b2240f
1 parent
457fe087
Badge add type prop, close #3425
Showing
4 changed files
with
51 additions
and
2 deletions
Show diff stats
examples/routers/badge.vue
| ... | ... | @@ -52,6 +52,29 @@ |
| 52 | 52 | <a href="//iviewui.com">我是一个链接</a> |
| 53 | 53 | </Badge> |
| 54 | 54 | </div> |
| 55 | + <div> | |
| 56 | + <Badge :count="count" type="primary"> | |
| 57 | + <a href="#" class="demo-badge"></a> | |
| 58 | + </Badge> | |
| 59 | + <Badge :count="count" type="success"> | |
| 60 | + <a href="#" class="demo-badge"></a> | |
| 61 | + </Badge> | |
| 62 | + <Badge :count="count" type="normal"> | |
| 63 | + <a href="#" class="demo-badge"></a> | |
| 64 | + </Badge> | |
| 65 | + <Badge :count="count" type="info"> | |
| 66 | + <a href="#" class="demo-badge"></a> | |
| 67 | + </Badge> | |
| 68 | + <Badge :count="count" type="error"> | |
| 69 | + <a href="#" class="demo-badge"></a> | |
| 70 | + </Badge> | |
| 71 | + <Badge :count="count" type="warning"> | |
| 72 | + <a href="#" class="demo-badge"></a> | |
| 73 | + </Badge> | |
| 74 | + <Badge :count="count"> | |
| 75 | + <a href="#" class="demo-badge"></a> | |
| 76 | + </Badge> | |
| 77 | + </div> | |
| 55 | 78 | </div> |
| 56 | 79 | </template> |
| 57 | 80 | <script> | ... | ... |
src/components/badge/badge.vue
| ... | ... | @@ -42,6 +42,11 @@ |
| 42 | 42 | return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']); |
| 43 | 43 | } |
| 44 | 44 | }, |
| 45 | + type: { | |
| 46 | + validator (value) { | |
| 47 | + return oneOf(value, ['success', 'primary', 'normal', 'error', 'warning', 'info']); | |
| 48 | + } | |
| 49 | + }, | |
| 45 | 50 | offset: { |
| 46 | 51 | type: Array |
| 47 | 52 | } |
| ... | ... | @@ -58,7 +63,8 @@ |
| 58 | 63 | `${prefixCls}-count`, |
| 59 | 64 | { |
| 60 | 65 | [`${this.className}`]: !!this.className, |
| 61 | - [`${prefixCls}-count-alone`]: this.alone | |
| 66 | + [`${prefixCls}-count-alone`]: this.alone, | |
| 67 | + [`${prefixCls}-count-${this.type}`]: !!this.type | |
| 62 | 68 | } |
| 63 | 69 | ]; |
| 64 | 70 | }, | ... | ... |
src/styles/components/badge.less
| ... | ... | @@ -38,6 +38,26 @@ |
| 38 | 38 | position: relative; |
| 39 | 39 | transform: translateX(0); |
| 40 | 40 | } |
| 41 | + | |
| 42 | + &-primary{ | |
| 43 | + background: @primary-color; | |
| 44 | + } | |
| 45 | + &-success{ | |
| 46 | + background: @success-color; | |
| 47 | + } | |
| 48 | + &-error{ | |
| 49 | + background: @error-color; | |
| 50 | + } | |
| 51 | + &-warning{ | |
| 52 | + background: @warning-color; | |
| 53 | + } | |
| 54 | + &-info{ | |
| 55 | + background: @info-color; | |
| 56 | + } | |
| 57 | + &-normal{ | |
| 58 | + background: @normal-color; | |
| 59 | + color: @subsidiary-color; | |
| 60 | + } | |
| 41 | 61 | } |
| 42 | 62 | |
| 43 | 63 | &-dot { | ... | ... |
src/styles/custom.less
| ... | ... | @@ -9,7 +9,7 @@ |
| 9 | 9 | @processing-color : @primary-color; |
| 10 | 10 | @warning-color : #ff9900; |
| 11 | 11 | @error-color : #ed3f14; |
| 12 | -@normal-color : #d9d9d9; | |
| 12 | +@normal-color : #e6ebf1; | |
| 13 | 13 | @link-color : #2D8cF0; |
| 14 | 14 | @link-hover-color : tint(@link-color, 20%); |
| 15 | 15 | @link-active-color : shade(@link-color, 5%); | ... | ... |