42 lines
1.0 KiB
Vue
42 lines
1.0 KiB
Vue
<template>
|
|
<text :style="styleInfo" v-if="messageNum > 0" class="benben_message_num">
|
|
{{ messageNum > 99 ? '···' : messageNum }}
|
|
</text>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: 'benben-message-num',
|
|
props: {
|
|
messageNum: { type: [String, Number], default: 0 },
|
|
size: { type: [String, Number], default: '24' }, //消息字体大小
|
|
color: { type: [String, Number], default: '#eee' },
|
|
backgroundColor: { type: [String, Number], default: 'red' },
|
|
},
|
|
components: {},
|
|
computed: {
|
|
styleInfo() {
|
|
let _size = this.size / 0.8 + 'rpx'
|
|
return `background-color:${this.backgroundColor};font-size:${this.size}rpx;color:${this.color};width:${_size};height:${_size};`
|
|
},
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
watch: {},
|
|
methods: {},
|
|
created() {},
|
|
beforeDestroy() {},
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.benben_message_num {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
font-weight: 500;
|
|
padding: 4rpx;
|
|
}
|
|
</style>
|