103 lines
1.4 KiB
Vue
103 lines
1.4 KiB
Vue
|
<template>
|
|||
|
|
<view class="tui-badge-class" :class="[dot?'tui-badge-dot':'tui-badge','tui-'+type, size?'tui-badge-small':'']" v-if="visible">
|
|||
|
|
<slot></slot>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "tuiBadge",
|
|||
|
|
props: {
|
|||
|
|
//primary,warning,green,danger,white，black，gray
|
|||
|
|
type: {
|
|||
|
|
type: String,
|
|||
|
|
default: 'primary'
|
|||
|
|
},
|
|||
|
|
// '', small
|
|||
|
|
size: {
|
|||
|
|
type: String,
|
|||
|
|
default: ''
|
|||
|
|
},
|
|||
|
|
//是否是圆点
|
|||
|
|
dot: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
//是否可见
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
/* color start*/
|
|||
|
|
|
|||
|
|
.tui-primary {
|
|||
|
|
background: #5677fc;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-danger {
|
|||
|
|
background: #ed3f14;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-red {
|
|||
|
|
background: #ff201f;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-warning {
|
|||
|
|
background: #ff7900;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-green {
|
|||
|
|
background: #19be6b;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-white {
|
|||
|
|
background: #fff;
|
|||
|
|
color: #333;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-black {
|
|||
|
|
background: #000;
|
|||
|
|
color: #fff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-gray {
|
|||
|
|
background: #ededed !important;
|
|||
|
|
color: #999 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* color end*/
|
|||
|
|
|
|||
|
|
/* badge start*/
|
|||
|
|
|
|||
|
|
.tui-badge-dot {
|
|||
|
|
height: 8px;
|
|||
|
|
width: 8px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-badge {
|
|||
|
|
font-size: 12px;
|
|||
|
|
line-height: 1;
|
|||
|
|
padding: 3px 6px;
|
|||
|
|
border-radius: 50px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tui-badge-small {
|
|||
|
|
transform: scale(0.8);
|
|||
|
|
transform-origin: center center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* badge end*/
|
|||
|
|
</style>
|