提交 bc369b57 编写于 作者: H hulinneil

修复 uni-badge 组件 样式偶发不对的问题

上级 eaaabc4c
<template>
<text class="uni-badge" v-if="text" :class="[inverted === true ? 'uni-badge-inverted' : '','uni-badge-'+type]" @click="onClick()">{{text}}</text>
<text class="uni-badge" v-if="text" :class="setClass" @click="onClick()">{{text}}</text>
</template>
<script>
export default {
props: {
type: String,
inverted:{
type: Boolean,
default: false
},
text:String
type: {
type: String,
default: 'default'
},
inverted: {
type: Boolean,
default: false
},
text: {
type: String,
default: ''
}
},
computed: {
setClass() {
let classList = ['uni-badge-' + this.type];
if (this.inverted === true) {
classList.push('uni-badge-inverted')
}
return classList.join(" ")
}
},
methods: {
onClick() {
......@@ -21,8 +36,9 @@
</script>
<style>
.uni-badge,.uni-badge-default {
font-family: 'Helvetica Neue',Helvetica,sans-serif;
.uni-badge,
.uni-badge-default {
font-family: 'Helvetica Neue', Helvetica, sans-serif;
box-sizing: border-box;
font-size: 12px;
line-height: 1;
......@@ -31,65 +47,66 @@
color: #333;
border-radius: 100px;
}
.uni-badge.uni-badge-inverted {
padding: 0 5px 0 0;
color: #929292;
background-color: transparent
}
.uni-badge-primary {
color: #fff;
background-color: #007aff
}
.uni-badge-blue.uni-badge-inverted,
.uni-badge-primary.uni-badge-inverted {
color: #007aff;
background-color: transparent
}
.uni-badge-green,
.uni-badge-success {
color: #fff;
background-color: #4cd964;
}
.uni-badge-green.uni-badge-inverted,
.uni-badge-success.uni-badge-inverted {
color: #4cd964;
background-color: transparent
}
.uni-badge-warning,
.uni-badge-yellow {
color: #fff;
background-color: #f0ad4e
}
.uni-badge-warning.uni-badge-inverted,
.uni-badge-yellow.uni-badge-inverted {
color: #f0ad4e;
background-color: transparent
}
.uni-badge-danger,
.uni-badge-red {
color: #fff;
background-color: #dd524d
}
.uni-badge-danger.uni-badge-inverted,
.uni-badge-red.uni-badge-inverted {
color: #dd524d;
background-color: transparent
}
.uni-badge-purple,
.uni-badge-royal {
color: #fff;
background-color: #8a6de9
}
.uni-badge-purple.uni-badge-inverted,
.uni-badge-royal.uni-badge-inverted {
color: #8a6de9;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册