提交 bc369b57 编写于 作者: H hulinneil

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

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