drip-public/iview
6
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Badge add type prop, close #3425

Browse source
This commit is contained in:
梁灏 2018-06-21 15:04:49 +08:00
parent 457fe0874c
commit cc27c42a0d
4 changed files with 51 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
examples/routers/badge.vue
View file

@ -52,6 +52,29 @@
<a href="//iviewui.com">我是一个链接</a>
</Badge>
</div>
<div>
<Badge :count="count" type="primary">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="success">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="normal">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="info">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="error">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count" type="warning">
<a href="#" class="demo-badge"></a>
</Badge>
<Badge :count="count">
<a href="#" class="demo-badge"></a>
</Badge>
</div>
</div>
</template>
<script>

8
src/components/badge/badge.vue
View file

@ -42,6 +42,11 @@
return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']);
}
},
type: {
validator (value) {
return oneOf(value, ['success', 'primary', 'normal', 'error', 'warning', 'info']);
}
},
offset: {
type: Array
}
@ -58,7 +63,8 @@
`${prefixCls}-count`,
{
[`${this.className}`]: !!this.className,
[`${prefixCls}-count-alone`]: this.alone
[`${prefixCls}-count-alone`]: this.alone,
[`${prefixCls}-count-${this.type}`]: !!this.type
}
];
},

20
src/styles/components/badge.less
View file

@ -38,6 +38,26 @@
position: relative;
transform: translateX(0);
}
&-primary{
background: @primary-color;
}
&-success{
background: @success-color;
}
&-error{
background: @error-color;
}
&-warning{
background: @warning-color;
}
&-info{
background: @info-color;
}
&-normal{
background: @normal-color;
color: @subsidiary-color;
}
}
&-dot {

2
src/styles/custom.less
View file

@ -9,7 +9,7 @@
@processing-color : @primary-color;
@warning-color : #ff9900;
@error-color : #ed3f14;
@normal-color : #d9d9d9;
@normal-color : #e6ebf1;
@link-color : #2D8cF0;
@link-hover-color : tint(@link-color, 20%);
@link-active-color : shade(@link-color, 5%);