213 lines
5.4 KiB
Vue
213 lines
5.4 KiB
Vue
<template>
|
||
<view v-if="show" class="u-badge" :class="[
|
||
isDot ? 'u-badge-dot' : '',
|
||
size == 'mini' ? 'u-badge-mini' : '',
|
||
type ? 'u-badge--bg--' + type : ''
|
||
]" :style="[{
|
||
top: offset[0] + 'rpx',
|
||
right: offset[1] + 'rpx',
|
||
fontSize: fontSize + 'rpx',
|
||
position: absolute ? 'absolute' : 'static',
|
||
color: color,
|
||
backgroundColor: bgColor
|
||
}, boxStyle]"
|
||
>
|
||
{{showText}}
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
/**
|
||
* badge 角标
|
||
* @description 本组件一般用于展示头像的地方，如个人中心，或者评论列表页的用户头像展示等场所。
|
||
* @tutorial https://www.uviewui.com/components/badge.html
|
||
* @property {String Number} count 展示的数字，大于 overflowCount 时显示为 ${overflowCount}+，为0且show-zero为false时隐藏
|
||
* @property {Boolean} is-dot 不展示数字，只有一个小点（默认false）
|
||
* @property {Boolean} absolute 组件是否绝对定位，为true时，offset参数才有效（默认true）
|
||
* @property {String Number} overflow-count 展示封顶的数字值（默认99）
|
||
* @property {String} type 使用预设的背景颜色（默认error）
|
||
* @property {Boolean} show-zero 当数值为 0 时，是否展示 Badge（默认false）
|
||
* @property {String} size Badge的尺寸，设为mini会得到小一号的Badge（默认default）
|
||
* @property {Array} offset 设置badge的位置偏移，格式为 [x, y]，也即设置的为top和right的值，单位rpx。absolute为true时有效（默认[20, 20]）
|
||
* @property {String} color 字体颜色（默认#ffffff）
|
||
* @property {String} bgColor 背景颜色，优先级比type高，如设置，type参数会失效
|
||
* @property {Boolean} is-center 组件中心点是否和父组件右上角重合，优先级比offset高，如设置，offset参数会失效（默认false）
|
||
* @example <u-badge type="error" count="7"></u-badge>
|
||
*/
|
||
export default {
|
||
name: 'u-badge',
|
||
props: {
|
||
// primary,warning,success,error,info
|
||
type: {
|
||
type: String,
|
||
default: 'error'
|
||
},
|
||
// default, mini
|
||
size: {
|
||
type: String,
|
||
default: 'default'
|
||
},
|
||
//是否是圆点
|
||
isDot: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 显示的数值内容
|
||
count: {
|
||
type: [Number, String],
|
||
},
|
||
// 展示封顶的数字值
|
||
overflowCount: {
|
||
type: Number,
|
||
default: 99
|
||
},
|
||
// 当数值为 0 时，是否展示 Badge
|
||
showZero: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
// 位置偏移
|
||
offset: {
|
||
type: Array,
|
||
default: () => {
|
||
return [20, 20]
|
||
}
|
||
},
|
||
// 是否开启绝对定位，开启了offset才会起作用
|
||
absolute: {
|
||
type: Boolean,
|
||
default: true
|
||
},
|
||
// 字体大小
|
||
fontSize: {
|
||
type: [String, Number],
|
||
default: '24'
|
||
},
|
||
// 字体演示
|
||
color: {
|
||
type: String,
|
||
default: '#ffffff'
|
||
},
|
||
// badge的背景颜色
|
||
bgColor: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
|
||
isCenter: {
|
||
type: Boolean,
|
||
default: false
|
||
}
|
||
},
|
||
computed: {
|
||
// 是否将badge中心与父组件右上角重合
|
||
boxStyle() {
|
||
let style = {};
|
||
if(this.isCenter) {
|
||
style.top = 0;
|
||
style.right = 0;
|
||
// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
|
||
style.transform = "translateY(-50%) translateX(50%)";
|
||
} else {
|
||
style.top = this.offset[0] + 'rpx';
|
||
style.right = this.offset[1] + 'rpx';
|
||
style.transform = "translateY(0) translateX(0)";
|
||
}
|
||
// 如果尺寸为mini，后接上scal()
|
||
if(this.size == 'mini') {
|
||
style.transform = style.transform + " scale(0.8)";
|
||
}
|
||
return style;
|
||
},
|
||
// isDot类型时，不显示文字
|
||
showText() {
|
||
if(this.isDot) return '';
|
||
else {
|
||
if(this.count > this.overflowCount) return `${this.overflowCount}+`;
|
||
else return this.count;
|
||
}
|
||
},
|
||
// 是否显示组件
|
||
show() {
|
||
// 如果count的值为0，并且showZero设置为false，不显示组件
|
||
if(this.count == 0 && this.showZero == false) return false;
|
||
else return true;
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "../../libs/css/style.components.scss";
|
||
|
||
.u-badge {
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
line-height: 24rpx;
|
||
padding: 4rpx 8rpx;
|
||
border-radius: 100rpx;
|
||
|
||
&--bg--primary {
|
||
background-color: $u-type-primary;
|
||
}
|
||
|
||
&--bg--error {
|
||
background-color: $u-type-error;
|
||
}
|
||
|
||
&--bg--success {
|
||
background-color: $u-type-success;
|
||
}
|
||
|
||
&--bg--info {
|
||
background-color: $u-type-info;
|
||
}
|
||
|
||
&--bg--warning {
|
||
background-color: $u-type-warning;
|
||
}
|
||
}
|
||
|
||
.u-badge-dot {
|
||
height: 16rpx;
|
||
width: 16rpx;
|
||
border-radius: 100rpx;
|
||
line-height: 1;
|
||
}
|
||
|
||
.u-badge-mini {
|
||
transform: scale(0.8);
|
||
transform-origin: center center;
|
||
}
|
||
|
||
// .u-primary {
|
||
// background: $u-type-primary;
|
||
// color: #fff;
|
||
// }
|
||
|
||
// .u-error {
|
||
// background: $u-type-error;
|
||
// color: #fff;
|
||
// }
|
||
|
||
// .u-warning {
|
||
// background: $u-type-warning;
|
||
// color: #fff;
|
||
// }
|
||
|
||
// .u-success {
|
||
// background: $u-type-success;
|
||
// color: #fff;
|
||
// }
|
||
|
||
// .u-black {
|
||
// background: #585858;
|
||
// color: #fff;
|
||
// }
|
||
|
||
.u-info {
|
||
background: $u-type-info;
|
||
color: #fff;
|
||
}
|
||
</style> |