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

Badge add new prop: color

Browse source
This commit is contained in:
梁灏 2019-09-05 11:45:00 +08:00
parent b321e1abca
commit e3930b7ace
3 changed files with 50 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
examples/routers/badge.vue
View file

@ -90,6 +90,33 @@
<a href="#" class="demo-badge"></a>
</Badge>
</div>
<Divider></Divider>
<Badge status="success" text="Success" />
<br />
<Badge status="error" text="Error" />
<br />
<Badge status="default" text="Default" />
<br />
<Badge status="processing" text="Processing" />
<br />
<Badge status="warning" text="Warning" />
<br />
<Badge color="blue" text="blue" />
<Badge color="green" text="green" />
<Badge color="red" text="red" />
<Badge color="yellow" text="yellow" />
<Badge color="pink" text="pink" />
<Badge color="magenta" text="magenta" />
<Badge color="volcano" text="volcano" />
<Badge color="orange" text="orange" />
<Badge color="gold" text="gold" />
<Badge color="lime" text="lime" />
<Badge color="cyan" text="cyan" />
<Badge color="geekblue" text="geekblue" />
<Badge color="purple" text="purple" />
<br />
<Badge color="#2db7f5" text="#2db7f5" />
<Badge color="#f50" text="#f50" />
</div>
</template>
<script>

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

@ -3,8 +3,8 @@
<slot></slot>
<sup :class="dotClasses" :style="styles" v-show="badge"></sup>
</span>
<span v-else-if="status" :class="classes" class="ivu-badge-status" ref="badge">
<span :class="statusClasses"></span>
<span v-else-if="status || color" :class="classes" class="ivu-badge-status" ref="badge">
<span :class="statusClasses" :style="statusStyles"></span>
<span class="ivu-badge-status-text"><slot name="text">{{ text }}</slot></span>
</span>
<span v-else :class="classes" ref="badge">
@ -15,6 +15,7 @@
</template>
<script>
import { oneOf } from '../../utils/assist';
const initColorList = ['blue', 'green', 'red', 'yellow', 'pink', 'magenta', 'volcano', 'orange', 'gold', 'lime', 'cyan', 'geekblue', 'purple'];
const prefixCls = 'ivu-badge';
export default {
@ -50,6 +51,9 @@
},
offset: {
type: Array
},
color: {
type: String
}
},
computed: {
@ -82,10 +86,14 @@
return [
`${prefixCls}-status-dot`,
{
[`${prefixCls}-status-${this.status}`]: !!this.status
[`${prefixCls}-status-${this.status}`]: !!this.status,
[`${prefixCls}-status-${this.color}`]: !!this.color && oneOf(this.color, initColorList)
}
];
},
statusStyles () {
return oneOf(this.color, initColorList) ? {} : { backgroundColor: this.color};
},
styles () {
const style = {};
if (this.offset && this.offset.length === 2) {

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

@ -127,6 +127,18 @@
font-size: @font-size-small;
margin-left: 6px;
}
@colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple;
.make-color-classes(@i: length(@colors)) when (@i > 0) {
.make-color-classes(@i - 1);
@color: extract(@colors, @i);
@darkColor: '@{color}-6';
&-@{color} {
background-color: @@darkColor;
}
}
.make-color-classes();
}
}