|
|
<!-- 徽章 -->
|
|
|
<template>
|
|
|
<view class="tm--badges fulled">
|
|
|
<view @click.stop="onclick" v-if="icon" class="tm--badges--cm icons flex-center border-white-a-1" :class="[color]" :style="offses+`;width:${iconWidth}rpx;height:${iconWidth}rpx;`">
|
|
|
<view class="d-inline-block flex-center vertical-align-middle" style="transform: scale(0.7); line-height: 0;">
|
|
|
<tm-icons style="line-height: 0;" :size="iconSize" :color="iconColor" dense :name="icon"></tm-icons>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view
|
|
|
@click="onclick"
|
|
|
v-if="!icon"
|
|
|
:style="offses"
|
|
|
class="tm--badges--cm d-inline-block px-6 "
|
|
|
:class="[color_tmeme, label != '' && !dot ? 'num shadow-red-10' : 'dot', 'flex-center']"
|
|
|
>
|
|
|
<text v-if="!dot" class="text-size-xs">{{ label }}</text>
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
/**
|
|
|
* 徽章、角标
|
|
|
* @property {String} label = [] 默认：''，当填入信息时即显示数字角标。
|
|
|
* @property {Number} icon-size = [] 默认：24，当为图标时，可以设置图标大小。
|
|
|
* @property {Number} icon-width = [] 默认：32，当为图标时，可以设置宽高。
|
|
|
* @property {String} color = [] 默认：red，主题背景色
|
|
|
* @property {String} icon-color = [] 默认：white，图标主题背景色
|
|
|
* @property {Boolean|String} dot = [] 默认：true，使用点。优先级高于label数字展示。
|
|
|
* @property {String} icon = [] 默认：''，使用图标作为显示角标。
|
|
|
* @property {Array} offset = [] 默认：[0,0]，位置,x,y偏移量。
|
|
|
* @property {Funciton} click 点击角标时触发。
|
|
|
* @example <tm-badges />
|
|
|
*/
|
|
|
import tmIcons from '@/tm-vuetify/components/tm-icons/tm-icons.vue';
|
|
|
export default {
|
|
|
components: { tmIcons },
|
|
|
name: 'tm-badges',
|
|
|
props: {
|
|
|
label: {
|
|
|
type: String | Number,
|
|
|
default: 0
|
|
|
},
|
|
|
// 使用点。优先级高于label数字展示。
|
|
|
dot: {
|
|
|
type: Boolean | String,
|
|
|
default: true
|
|
|
},
|
|
|
// 使用图标展示
|
|
|
icon: {
|
|
|
type: String,
|
|
|
default: ''
|
|
|
},
|
|
|
iconSize: {
|
|
|
type: Number|String,
|
|
|
default: 24
|
|
|
},
|
|
|
iconWidth:{
|
|
|
type: Number|String,
|
|
|
default: 32
|
|
|
},
|
|
|
// 主题色名称
|
|
|
color: {
|
|
|
type: String,
|
|
|
default: 'red'
|
|
|
},
|
|
|
// 图标主题色名称
|
|
|
iconColor: {
|
|
|
type: String,
|
|
|
default: 'white'
|
|
|
},
|
|
|
// 位置[0,0]
|
|
|
offset: {
|
|
|
type: Array,
|
|
|
default: () => {
|
|
|
return [0, 0];
|
|
|
}
|
|
|
},
|
|
|
// 跟随主题色的改变而改变。
|
|
|
fllowTheme: {
|
|
|
type: Boolean | String,
|
|
|
default: false
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
offses: function() {
|
|
|
let p = uni.$tm.objToString({
|
|
|
transform: `translateX(${this.offset[0]}px) translateY(${this.offset[1]}px)`
|
|
|
});
|
|
|
return p;
|
|
|
},
|
|
|
color_tmeme: function() {
|
|
|
if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
|
|
|
return this.$tm.vx.state().tmVuetify.color;
|
|
|
}
|
|
|
return this.color;
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {};
|
|
|
},
|
|
|
methods: {
|
|
|
onclick(e) {
|
|
|
this.$emit('click', e);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.tm--badges {
|
|
|
position: relative;
|
|
|
// pointer-events: none;
|
|
|
display: block;
|
|
|
.tm--badges--cm {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 0;
|
|
|
width: 100%;
|
|
|
&.num {
|
|
|
width: auto;
|
|
|
min-width: 26rpx;
|
|
|
height: 35rpx;
|
|
|
color: #fff;
|
|
|
border-radius: 50rpx;
|
|
|
font-size: 22upx;
|
|
|
line-height: 35upx;
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
&.icons {
|
|
|
@extend .num;
|
|
|
}
|
|
|
|
|
|
&.dot {
|
|
|
width: 16upx;
|
|
|
height: 16upx;
|
|
|
min-width: 0 !important;
|
|
|
color: #fff;
|
|
|
padding: 0;
|
|
|
border-radius: 50%;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|