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> |