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