Vue.component('vj-badge', {
template:
`
<div class="container-badge">
<slot></slot>
<div class="badge" :class="[color, position]">{{this.text}}</div>
</div>
`,
props: {
text : {
required: true
},
color : {
default: 'cb-info'
},
position : {
default: 'bottom-right'
},
},
})
new Vue({
el: '#root'
})
<html>
<div id="root">
<vj-badge text="12">
<button type="button">Button</button>
</vj-badge>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</html>
.container-badge {
display: inline-block;
position: relative;
}
.badge {
color: #fff;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: absolute;
font-size: 12px;
font-weight: bold;
border-radius: 50px;
padding: 1px 5px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
pointer-events: none;
}
/* Position badge */
.bottom-right {
bottom: -10px;
right: -10px;
}
.bottom-left {
bottom: -10px;
left: -10px;
}
.top-right {
top: -10px;
right: -10px;
}
.top-left {
top: -10px;
left: -10px;
}
/* Default Color badge */
.cb-info { background: dodgerblue;}
.cb-warning { background: orange; }
.cb-alert { background: red; }
.cb-success { background: greenyellow; }