|
|
<template>
|
|
|
<text v-if="text" :class="inverted ? 'uni-badge--' + type + ' uni-badge--' + size + ' uni-badge--' + type + '-inverted' : 'uni-badge--' + type + ' uni-badge--' + size"
|
|
|
:style="badgeStyle" class="uni-badge" @click="onClick()">{{ text }}</text>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* Badge 数字角标
|
|
|
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
|
|
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
|
|
* @property {String} text 角标内容
|
|
|
* @property {String} type = [default|primary|success|warning|error] 颜色类型
|
|
|
* @value default 灰色
|
|
|
* @value primary 蓝色
|
|
|
* @value success 绿色
|
|
|
* @value warning 黄色
|
|
|
* @value error 红色
|
|
|
* @property {String} size = [normal|small] Badge 大小
|
|
|
* @value normal 一般尺寸
|
|
|
* @value small 小尺寸
|
|
|
* @property {String} inverted = [true|false] 是否无需背景颜色
|
|
|
* @event {Function} click 点击 Badge 触发事件
|
|
|
* @example <uni-badge text="1"></uni-badge>
|
|
|
*/
|
|
|
export default {
|
|
|
name: 'UniBadge',
|
|
|
props: {
|
|
|
type: {
|
|
|
type: String,
|
|
|
default: 'default'
|
|
|
},
|
|
|
inverted: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
text: {
|
|
|
type: [String, Number],
|
|
|
default: ''
|
|
|
},
|
|
|
size: {
|
|
|
type: String,
|
|
|
default: 'normal'
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
badgeStyle: ''
|
|
|
};
|
|
|
},
|
|
|
watch: {
|
|
|
text() {
|
|
|
this.setStyle()
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
this.setStyle()
|
|
|
},
|
|
|
methods: {
|
|
|
setStyle() {
|
|
|
this.badgeStyle = `width: ${String(this.text).length * 8 + 12}px`
|
|
|
},
|
|
|
onClick() {
|
|
|
this.$emit('click');
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
$bage-size: 12px;
|
|
|
$bage-small: scale(0.8);
|
|
|
$bage-height: 20px;
|
|
|
|
|
|
.uni-badge {
|
|
|
/* #ifndef APP-PLUS */
|
|
|
display: flex;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden;
|
|
|
/* #endif */
|
|
|
justify-content: center;
|
|
|
flex-direction: row;
|
|
|
height: $bage-height;
|
|
|
line-height: $bage-height;
|
|
|
color: $uni-text-color;
|
|
|
border-radius: 100px;
|
|
|
background-color: $uni-bg-color-hover;
|
|
|
background-color: transparent;
|
|
|
text-align: center;
|
|
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
|
|
font-size: $bage-size;
|
|
|
padding: 0px 6px;
|
|
|
}
|
|
|
|
|
|
.uni-badge--inverted {
|
|
|
padding: 0 5px 0 0;
|
|
|
color: $uni-bg-color-hover;
|
|
|
}
|
|
|
|
|
|
.uni-badge--default {
|
|
|
color: $uni-text-color;
|
|
|
background-color: $uni-bg-color-hover;
|
|
|
}
|
|
|
|
|
|
.uni-badge--default-inverted {
|
|
|
color: $uni-text-color-grey;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.uni-badge--primary {
|
|
|
color: $uni-text-color-inverse;
|
|
|
background-color: $uni-color-primary;
|
|
|
}
|
|
|
|
|
|
.uni-badge--primary-inverted {
|
|
|
color: $uni-color-primary;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.uni-badge--success {
|
|
|
color: $uni-text-color-inverse;
|
|
|
background-color: $uni-color-success;
|
|
|
}
|
|
|
|
|
|
.uni-badge--success-inverted {
|
|
|
color: $uni-color-success;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.uni-badge--warning {
|
|
|
color: $uni-text-color-inverse;
|
|
|
background-color: $uni-color-warning;
|
|
|
}
|
|
|
|
|
|
.uni-badge--warning-inverted {
|
|
|
color: $uni-color-warning;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.uni-badge--error {
|
|
|
color: $uni-text-color-inverse;
|
|
|
background-color: $uni-color-error;
|
|
|
}
|
|
|
|
|
|
.uni-badge--error-inverted {
|
|
|
color: $uni-color-error;
|
|
|
background-color: transparent;
|
|
|
}
|
|
|
|
|
|
.uni-badge--small {
|
|
|
transform: $bage-small;
|
|
|
transform-origin: center center;
|
|
|
}
|
|
|
</style>
|