All files / src/components/u-badge.vue index.vue

68.42% Statements 13/19
14.28% Branches 2/14
33.33% Functions 1/3
72.22% Lines 13/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78      7x   7x     7x                                                                                       7x 7x                                                
<template>
<div :class="$style.root">
    <div v-if="$env.VUE_APP_DESIGNER" vusion-slot-name="default" :class="$style.content">
        <slot></slot>
        <s-empty v-if="(!$slots.default) && !!$attrs['vusion-node-path']"></s-empty>
    </div>
     <slot v-else></slot>
    <span :class="$style.value" v-if="currentValue">{{ currentValue }}</span>
</div>
</template>
 
<script>
import SEmpty from '../../components/s-empty.vue';
export default {
    name: 'u-badge',
    components: { SEmpty },
    props: { value: [Number, String], max: { type: Number, default: 99 } },
    computed: {
        currentValue() {
            if (typeof this.value !== 'number')
                return this.value;
            else
                return this.value > this.max ? this.max + '+' : this.value;
        },
    },
};
</script>
 
<style module>
.root {
    position: relative;
    display: inline-block;
}
 
.content {
    display: inline-block;
}
 
.value {
    display: inline-block;
    text-align: center;
    line-height: var(--badge-value-size);
    min-width: var(--badge-value-size);
    font-size: var(--font-size-small);
    padding: 0 6px;
    border-radius: 100px;
    background: var(--badge-background);
    color: var(--badge-color);
    box-shadow: var(--badge-box-shadow);
}
 
.root[corner] {
    line-height: 1; /* 防止外面的 line-height 影响 */
}

.root[corner] .value {
    position: absolute;
    /* transform: translateX(50%); */
    /* right: -5px; */
    top: calc(var(--badge-value-size) / -2);
    left: calc(100% - 7px);
}
 
.root[dot] .value {
    width: var(--badge-dot-size);
    height: var(--badge-dot-size);
    font-size: 0;
    min-width: auto;
    padding: 0;
    top: calc(var(--badge-dot-size) / -2);
    left: 100%;
}
 
.root[display="block"] {
    display: block;
}
</style>