129 lines
2.9 KiB
Vue
129 lines
2.9 KiB
Vue
<template>
|
||
<view :class="[dot ? 'tui-badge-dot' : 'tui-badge', !dot ? 'tui-badge-scale' : '']"
|
||
:style="{ top: top, right: right, position: absolute ? 'absolute' : 'static', transform: getStyle, margin: margin,background:getBackground,color:getColor }"
|
||
@tap="handleClick">
|
||
<slot></slot>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'tuiBadge',
|
||
emits: ['click'],
|
||
props: {
|
||
//primary,warning,green,danger,white，black，gray,white_red
|
||
type: {
|
||
type: String,
|
||
default: 'primary'
|
||
},
|
||
//是否是圆点
|
||
dot: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
margin: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
//是否绝对定位
|
||
absolute: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
top: {
|
||
type: String,
|
||
default: '-8rpx'
|
||
},
|
||
right: {
|
||
type: String,
|
||
default: '0'
|
||
},
|
||
//缩放比例
|
||
scaleRatio: {
|
||
type: Number,
|
||
default: 1
|
||
},
|
||
//水平方向移动距离
|
||
translateX: {
|
||
type: String,
|
||
default: '0'
|
||
}
|
||
},
|
||
computed: {
|
||
getStyle() {
|
||
return `scale(${this.scaleRatio}) translateX(${this.translateX})`;
|
||
},
|
||
getBackground() {
|
||
const global = uni && uni.$tui && uni.$tui.color;
|
||
let color = {
|
||
'primary': (global && global.primary) || '#5677fc',
|
||
'green': (global && global.success) || '#07c160',
|
||
'warning': (global && global.warning) || '#ff7900',
|
||
'danger': (global && global.danger) || '#EB0909',
|
||
'white': '#fff',
|
||
'black': '#000',
|
||
'gray': '#ededed',
|
||
'red': (global && global.pink) || '#f74d54',
|
||
'pink': (global && global.pink) || '#f74d54',
|
||
'white_red': '#fff',
|
||
'white_primary': '#fff',
|
||
'white_green': '#fff',
|
||
'white_warning': '#fff',
|
||
'white_pink': '#fff'
|
||
} [this.type]
|
||
return color
|
||
},
|
||
getColor() {
|
||
const global = uni && uni.$tui && uni.$tui.color;
|
||
let color = {
|
||
'primary': '#fff',
|
||
'green': '#fff',
|
||
'warning': '#fff',
|
||
'danger': '#fff',
|
||
'white': '#333',
|
||
'black': '#fff',
|
||
'gray': '#999',
|
||
'red': '#fff',
|
||
'pink': (global && global.pink) || '#f74d54',
|
||
'white_red': (global && global.danger) || '#EB0909',
|
||
'white_primary': (global && global.primary) || '#5677fc',
|
||
'white_green': (global && global.success) || '#07c160',
|
||
'white_warning': (global && global.warning) || '#ff7900',
|
||
'white_pink': (global && global.pink) || '#f74d54',
|
||
} [this.type]
|
||
return color
|
||
}
|
||
},
|
||
methods: {
|
||
handleClick() {
|
||
this.$emit('click', {});
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.tui-badge-dot {
|
||
height: 8px;
|
||
width: 8px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.tui-badge {
|
||
font-size: 24rpx;
|
||
line-height: 24rpx;
|
||
height: 36rpx;
|
||
min-width: 36rpx;
|
||
padding: 0 10rpx;
|
||
box-sizing: border-box;
|
||
border-radius: 100rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.tui-badge-scale {
|
||
transform-origin: center center;
|
||
}
|
||
</style> |