Skip to content

U
uview-ui
Commit ca6f9033 authored by 王博文's avatar 王博文
Browse files
Options

增加数组类型

parent 8629de99
Hide whitespace changes
Inline Side-by-side
Showing with 166 additions and 157 deletions
uview/components/u-badge/u-badge.vue
View file @ ca6f9033
<template> <template>
<view v-if="show" class="u-badge-box" :class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']" :style="[{ <view
v-if="show"
class="u-badge-box"
:class="[isDot ? 'u-badge-dot' : 'u-badge', size == 'mini' ? 'u-badge-mini' : '']"
:style="[{
top: offset[0] + 'rpx', top: offset[0] + 'rpx',
right: offset[1] + 'rpx', right: offset[1] + 'rpx',
fontSize: fontSize + 'rpx', fontSize: fontSize + 'rpx',
position: absolute ? 'absolute' : 'static', position: absolute ? 'absolute' : 'static',
color: color, color: color,
backgroundColor: backgroundColor backgroundColor: backgroundColor
}, boxStyle]"> }, boxStyle]"
{{showText}} >{{showText}}</view>
</view>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
// primary,warning,success,error,info // primary,warning,success,error,info
type: { type: {
type: String, type: String,
default: 'error' default: "error"
}, },
// default, mini // default, mini
size: { size: {
type: String, type: String,
default: 'default' default: "default"
}, },
//是否是圆点 //是否是圆点
isDot: { isDot: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 显示的数值内容 // 显示的数值内容
count: { count: {
type: [Number, String], type: [Number, String, Array]
}, },
// 展示封顶的数字值 // 展示封顶的数字值
overflowCount: { overflowCount: {
type: Number, type: Number,
default: 99 default: 99
}, },
// 当数值为 0 时，是否展示 Badge // 当数值为 0 时，是否展示 Badge
showZero: { showZero: {
type: Boolean, type: Boolean,
default: false default: false
}, },
// 位置偏移 // 位置偏移
offset: { offset: {
type: Array, type: Array,
default: () => { default: () => {
return [20, 20] return [20, 20];
} }
}, },
// 是否开启绝对定位，开启了offset才会起作用 // 是否开启绝对定位，开启了offset才会起作用
absolute: { absolute: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 字体大小 // 字体大小
fontSize: { fontSize: {
type: [String, Number], type: [String, Number],
default: '24' default: "24"
}, },
// 字体演示 // 字体演示
color: { color: {
type: String, type: String,
default: '#ffffff' default: "#ffffff"
}, },
// badge的背景颜色 // badge的背景颜色
bgColor: { bgColor: {
type: String, type: String,
default: '' default: ""
}, },
// 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效 // 是否让badge组件的中心点和父组件右上角重合，配置的话，offset将会失效
isCenter: { isCenter: {
type: Boolean, type: Boolean,
default: false default: false
} }
}, },
computed: { computed: {
// 是否将badge中心与父组件右上角重合 // 是否将badge中心与父组件右上角重合
boxStyle() { boxStyle() {
let style = {}; let style = {};
if(this.isCenter) { if (this.isCenter) {
style.top = 0; style.top = 0;
style.right = 0; style.right = 0;
// Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半 // Y轴-50%，意味着badge向上移动了badge自身高度一半，X轴50%，意味着向右移动了自身宽度一半
style.transform = "translateY(-50%) translateX(50%)"; style.transform = "translateY(-50%) translateX(50%)";
} else { } else {
style.top = this.offset[0] + 'rpx'; style.top = this.offset[0] + "rpx";
style.right = this.offset[1] + 'rpx'; style.right = this.offset[1] + "rpx";
style.transform = "translateY(0) translateX(0)"; style.transform = "translateY(0) translateX(0)";
} }
return style; return style;
}, },
// isDot类型时，不显示文字 // isDot类型时，不显示文字
showText() { showText() {
if(this.isDot) return ''; if (this.isDot) return "";
else { console.log(this.count);
if(this.count > this.overflowCount) return `${this.overflowCount}+`; if (Array.isArray(this.count)) {
else return this.count; if (this.count.length > this.overflowCount) {
} return `${this.overflowCount}+`;
}, } else return this.count.length;
// 是否显示组件 } else {
show() { if (this.count > this.overflowCount) {
// 如果count的值为0，并且showZero设置为false，不显示组件 return `${this.overflowCount}+`;
if(this.count == 0 && this.showZero == false) return false; } else return this.count;
else return true; }
}, },
// 获取背景颜色，如果定义了bgColor参数，就放弃type主题色 // 是否显示组件
backgroundColor() { show() {
return this.bgColor ? this.bgColor : this.$u.color[this.type]; // 如果count的值为0，并且showZero设置为false，不显示组件
} if (this.count == 0 && this.showZero == false) return false;
} else return true;
} },
// 获取背景颜色，如果定义了bgColor参数，就放弃type主题色
backgroundColor() {
return this.bgColor ? this.bgColor : this.$u.color[this.type];
}
}
};
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.u-badge-box { .u-badge-box {
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.u-badge { .u-badge {
line-height: 24rpx; line-height: 24rpx;
padding: 4rpx 8rpx; padding: 4rpx 8rpx;
border-radius: 100rpx; border-radius: 100rpx;
} }
.u-badge-dot { .u-badge-dot {
height: 16rpx; height: 16rpx;
width: 16rpx; width: 16rpx;
border-radius: 100rpx; border-radius: 100rpx;
line-height: 1; line-height: 1;
} }
.u-badge-mini { .u-badge-mini {
transform: scale(0.8); transform: scale(0.8);
transform-origin: center center; transform-origin: center center;
} }
// .u-primary { // .u-primary {
// background: $u-type-primary; // background: $u-type-primary;
// color: #fff; // color: #fff;
// } // }
// .u-error { // .u-error {
// background: $u-type-error; // background: $u-type-error;
// color: #fff; // color: #fff;
// } // }
// .u-warning { // .u-warning {
// background: $u-type-warning; // background: $u-type-warning;
// color: #fff; // color: #fff;
// } // }
// .u-success { // .u-success {
// background: $u-type-success; // background: $u-type-success;
// color: #fff; // color: #fff;
// } // }
// .u-black { // .u-black {
// background: #585858; // background: #585858;
// color: #fff; // color: #fff;
// } // }
.u-info { .u-info {
background: $u-type-info; background: $u-type-info;
color: #fff; color: #fff;
} }
</style> </style>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment