<template>
|
<view class="uni-badge--x">
|
<slot />
|
<text v-if="text" :class="classNames" :style="[positionStyle, customStyle, dotStyle]"
|
class="uni-badge" @click="onClick()">{{displayValue}}</text>
|
</view>
|
</template>
|
|
<script>
|
/**
|
* Badge 数字角标
|
* @description 数字角标一般和其它控件（列表、9宫格等）配合使用，用于进行数量提示，默认为实心灰色背景
|
* @tutorial https://ext.dcloud.net.cn/plugin?id=21
|
* @property {String} text 角标内容
|
* @property {String} size = [normal|small] 角标内容
|
* @property {String} type = [info|primary|success|warning|error] 颜色类型
|
* @value info 灰色
|
* @value primary 蓝色
|
* @value success 绿色
|
* @value warning 黄色
|
* @value error 红色
|
* @property {String} inverted = [true|false] 是否无需背景颜色
|
* @property {Number} maxNum 展示封顶的数字值，超过 99 显示 99+
|
* @property {String} absolute = [rightTop|rightBottom|leftBottom|leftTop] 开启绝对定位, 角标将定位到其包裹的标签的四角上
|
* @value rightTop 右上
|
* @value rightBottom 右下
|
* @value leftTop 左上
|
* @value leftBottom 左下
|
* @property {Array[number]} offset 距定位角中心点的偏移量，只有存在 absolute 属性时有效，例如：[-10, -10] 表示向外偏移 10px，[10, 10] 表示向 absolute 指定的内偏移 10px
|
* @property {String} isDot = [true|false] 是否显示为一个小点
|
* @event {Function} click 点击 Badge 触发事件
|
* @example <uni-badge text="1"></uni-badge>
|
*/
|
|
export default {
|
name: 'UniBadge',
|
emits: ['click'],
|
props: {
|
type: {
|
type: String,
|
default: 'error'
|
},
|
inverted: {
|
type: Boolean,
|
default: false
|
},
|
isDot: {
|
type: Boolean,
|
default: false
|
},
|
maxNum: {
|
type: Number,
|
default: 99
|
},
|
absolute: {
|
type: String,
|
default: ''
|
},
|
offset: {
|
type: Array,
|
default () {
|
return [0, 0]
|
}
|
},
|
text: {
|
type: [String, Number],
|
default: ''
|
},
|
size: {
|
type: String,
|
default: 'small'
|
},
|
customStyle: {
|
type: Object,
|
default () {
|
return {}
|
}
|
}
|
},
|
data() {
|
return {};
|
},
|
computed: {
|
width() {
|
return String(this.text).length * 8 + 12
|
},
|
classNames() {
|
const {
|
inverted,
|
type,
|
size,
|
absolute
|
} = this
|
return [
|
inverted ? 'uni-badge--' + type + '-inverted' : '',
|
'uni-badge--' + type,
|
'uni-badge--' + size,
|
absolute ? 'uni-badge--absolute' : ''
|
].join(' ')
|
},
|
positionStyle() {
|
if (!this.absolute) return {}
|
let w = this.width / 2,
|
h = 10
|
if (this.isDot) {
|
w = 5
|
h = 5
|
}
|
const x = `${- w + this.offset[0]}px`
|
const y = `${- h + this.offset[1]}px`
|
|
const whiteList = {
|
rightTop: {
|
right: x,
|
top: y
|
},
|
rightBottom: {
|
right: x,
|
bottom: y
|
},
|
leftBottom: {
|
left: x,
|
bottom: y
|
},
|
leftTop: {
|
left: x,
|
top: y
|
}
|
}
|
const match = whiteList[this.absolute]
|
return match ? match : whiteList['rightTop']
|
},
|
dotStyle() {
|
if (!this.isDot) return {}
|
return {
|
width: '10px',
|
minWidth: '0',
|
height: '10px',
|
padding: '0',
|
borderRadius: '10px'
|
}
|
},
|
displayValue() {
|
const {
|
isDot,
|
text,
|
maxNum
|
} = this
|
return isDot ? '' : (Number(text) > maxNum ? `${maxNum}+` : text)
|
}
|
},
|
methods: {
|
onClick() {
|
this.$emit('click');
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss" >
|
$uni-primary: #2979ff !default;
|
$uni-success: #4cd964 !default;
|
$uni-warning: #f0ad4e !default;
|
$uni-error: #dd524d !default;
|
$uni-info: #909399 !default;
|
|
|
$bage-size: 12px;
|
$bage-small: scale(0.8);
|
|
.uni-badge--x {
|
/* #ifdef APP-NVUE */
|
// align-self: flex-start;
|
/* #endif */
|
/* #ifndef APP-NVUE */
|
display: inline-block;
|
/* #endif */
|
position: relative;
|
}
|
|
.uni-badge--absolute {
|
position: absolute;
|
}
|
|
.uni-badge--small {
|
transform: $bage-small;
|
transform-origin: center center;
|
}
|
|
.uni-badge {
|
/* #ifndef APP-NVUE */
|
display: flex;
|
overflow: hidden;
|
box-sizing: border-box;
|
/* #endif */
|
justify-content: center;
|
flex-direction: row;
|
height: 20px;
|
min-width: 20px;
|
padding: 0 4px;
|
line-height: 18px;
|
color: #fff;
|
border-radius: 100px;
|
background-color: $uni-info;
|
background-color: transparent;
|
border: 1px solid #fff;
|
text-align: center;
|
font-family: 'Helvetica Neue', Helvetica, sans-serif;
|
font-feature-settings: "tnum";
|
font-size: $bage-size;
|
/* #ifdef H5 */
|
z-index: 999;
|
cursor: pointer;
|
/* #endif */
|
|
&--info {
|
color: #fff;
|
background-color: $uni-info;
|
}
|
|
&--primary {
|
background-color: $uni-primary;
|
}
|
|
&--success {
|
background-color: $uni-success;
|
}
|
|
&--warning {
|
background-color: $uni-warning;
|
}
|
|
&--error {
|
background-color: $uni-error;
|
}
|
|
&--inverted {
|
padding: 0 5px 0 0;
|
color: $uni-info;
|
}
|
|
&--info-inverted {
|
color: $uni-info;
|
background-color: transparent;
|
}
|
|
&--primary-inverted {
|
color: $uni-primary;
|
background-color: transparent;
|
}
|
|
&--success-inverted {
|
color: $uni-success;
|
background-color: transparent;
|
}
|
|
&--warning-inverted {
|
color: $uni-warning;
|
background-color: transparent;
|
}
|
|
&--error-inverted {
|
color: $uni-error;
|
background-color: transparent;
|
}
|
|
}
|
</style>
|
