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

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>