123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
- <view v-if="show" class="u-badge" :class="[
- isDot ? 'u-badge-dot' : '',
- size == 'mini' ? 'u-badge-mini' : '',
- type ? 'u-badge--bg--' + type : ''
- ]" :style="[{
- top: offset[0] + 'rpx',
- right: offset[1] + 'rpx',
- fontSize: fontSize + 'rpx',
- position: absolute ? 'absolute' : 'static',
- color: color,
- backgroundColor: bgColor
- }, boxStyle]"
- >
- {{showText}}
- </view>
- </template>
- <script>
-
- export default {
- name: 'u-badge',
- props: {
-
- type: {
- type: String,
- default: 'error'
- },
-
- size: {
- type: String,
- default: 'default'
- },
-
- isDot: {
- type: Boolean,
- default: false
- },
-
- count: {
- type: [Number, String],
- },
-
- overflowCount: {
- type: Number,
- default: 99
- },
-
- showZero: {
- type: Boolean,
- default: false
- },
-
- offset: {
- type: Array,
- default: () => {
- return [20, 20]
- }
- },
-
- absolute: {
- type: Boolean,
- default: true
- },
-
- fontSize: {
- type: [String, Number],
- default: '24'
- },
-
- color: {
- type: String,
- default: '#ffffff'
- },
-
- bgColor: {
- type: String,
- default: ''
- },
-
- isCenter: {
- type: Boolean,
- default: false
- }
- },
- computed: {
-
- boxStyle() {
- let style = {};
- if(this.isCenter) {
- style.top = 0;
- style.right = 0;
-
- style.transform = "translateY(-50%) translateX(50%)";
- } else {
- style.top = this.offset[0] + 'rpx';
- style.right = this.offset[1] + 'rpx';
- style.transform = "translateY(0) translateX(0)";
- }
-
- if(this.size == 'mini') {
- style.transform = style.transform + " scale(0.8)";
- }
- return style;
- },
-
- showText() {
- if(this.isDot) return '';
- else {
- if(this.count > this.overflowCount) return `${this.overflowCount}+`;
- else return this.count;
- }
- },
-
- show() {
-
- if(this.count == 0 && this.showZero == false) return false;
- else return true;
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- @import "../../libs/css/style.components.scss";
-
- .u-badge {
- /* #ifndef APP-NVUE */
- display: inline-flex;
- /* #endif */
- justify-content: center;
- align-items: center;
- line-height: 24rpx;
- padding: 4rpx 8rpx;
- border-radius: 100rpx;
- z-index: 9;
-
- &--bg--primary {
- background-color: $u-type-primary;
- }
-
- &--bg--error {
- background-color: $u-type-error;
- }
-
- &--bg--success {
- background-color: $u-type-success;
- }
-
- &--bg--info {
- background-color: $u-type-info;
- }
-
- &--bg--warning {
- background-color: $u-type-warning;
- }
- }
-
- .u-badge-dot {
- height: 16rpx;
- width: 16rpx;
- border-radius: 100rpx;
- line-height: 1;
- }
-
- .u-badge-mini {
- transform: scale(0.8);
- transform-origin: center center;
- }
-
- // .u-primary {
- // background: $u-type-primary;
- // color: #fff;
- // }
-
- // .u-error {
- // background: $u-type-error;
- // color: #fff;
- // }
-
- // .u-warning {
- // background: $u-type-warning;
- // color: #fff;
- // }
-
- // .u-success {
- // background: $u-type-success;
- // color: #fff;
- // }
-
- // .u-black {
- // background: #585858;
- // color: #fff;
- // }
-
- .u-info {
- background-color: $u-type-info;
- color: #fff;
- }
- </style>
|